Short CSS-Question

Hi everybody,

i´m using the Switch-Addon in my Application. Now i want to change the Alignment of the Switch Widget to center under the caption.

when i change "text-align: left;" to "text-align: center" with firebug, the component is at the correct place. but how can i add this to my css-file?!

.v-widget {
    box-sizing: border-box;
    display: inline-block;
    text-align: left;
    vertical-align: top;
    white-space: normal;
}

if you want to change it for all Switch components in your app you should use the selector

.v-switch

if you only want to target specific ones use setStyleName or addStyleName on your Component like for example:

mySwitchComponent.setStyleName("centeredSwitch");

Then you can use:

.v-switch-centeredSwitch

to just target specific ones.
If you're using Scss make sure you recompile your theme and clear the Browser cache before testing any change in your style.

If your style still isn't applied check with firebug if the style shows up on the right when selecting the Switch component. If it is and most of the style properties you set are crossed out you need to make your selector more specific or use !important on your property.