css - 使用 Vaadin 在按钮图像/图标中间设置标题

Question

通过 CSS，我能够让 v.nativebutton 看起来像我想要的那样，但我无法让标题位于我的图标/图像的中间。附件是当我添加 text -align: center 到我的 CSS 样式表时按钮的样子的屏幕截图。关于如何将按钮的标题设置在图标图像中间的任何想法？我想在圆圈内显示'学生'标签？

CSS IM 使用:

.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

如果你调用了

button.addStyleName("center-text");

在您的原生按钮上，以下 CSS 将使文本居中:

以下 CSS 将使标题跨行居中:

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