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

Question

通过 CSS，我能够让 v.nativebutton 看起来像我想要的那样，但我不能'不让标题位于我的图标/图像的中间。附件是我将文本 -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;
}

Answer 2

我对 vaadin 没有经验，所以如果我的建议与 vaadin 无关，我深表歉意，但无论如何我都会继续插话！

发布您拥有的代码（指定元素的 css 和 html）可能会有所帮助，但我认为我仍然可以提供帮助。

我建议将圆形元素的定位设置为相对，将标题的定位设置为绝对，然后将标题定位在中间。这是一种解决方案：

#circle {
    position: relative;
}

#caption {
    position: absolute;
    top: 75px; /* Whatever half of the circle is */
    left: 50%;
    width: 50px;
    margin: 0 0 0 -25px /* Sets margin-left to half of the width of the caption */
}

如果将 #circle 定位设置为相对，将 #caption 定位设置为绝对，它会将标题放置在圆圈的右上角，在其顶部。然后，您可以将“top”属性设置为圆的总高度的一半，以将其放置在 y 轴上圆的中心。如果将标题的 left 属性设置为 50%，然后给它一个等于其宽度一半的负左边距，它应该完美居中。确保将 #circle 设置为相对定位，否则标题可能绝对相对于整个页面定位，而不仅仅是相对于圆圈。

如果这不起作用，请告诉我，因为还有其他一些可能的解决方案。一种涉及使用 margin: 0 auto 来代替标题的居中。

我希望这有帮助！