Question

Through CSS i am able to get the v.nativebutton looking the way i want to, but i can’t get the caption to be right in the middle of my icon/image. Attached is the screen shot of what the button looks like when i add text -align: center to my CSS style sheet. Any idea on how i can set the caption of the button to be right in the middle of my icon image? I want to show the ‘Students’ label inside the circle?

CSS IM USING:

.v-nativebutton-center-text .v-nativebutton-caption {
display: block;
white-space: normal;
text-align: center;
}
.v-nativebutton::-moz-focus-inner {
border: none;
padding: 0;
 }
 .v-nativebutton-center-text span {
  font-size: x-small;
  text-shadow: #fafafa 1px 1px 0;
}
.v-nativebutton-center-text img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5px;

 }

Answer 1

If you have invoked

button.addStyleName(“center-text”);

on your native button, the following CSS will center the text:

The following CSS will center the caption accross line breaks:

.v-nativebutton-center-text .v-nativebutton-caption {
    display: block;
    white-space: normal;
    text-align: center;
}