使用VAADIN在按钮图像/图标中间设置字幕 P>通过CSS，我可以得到V.NATEVELY按钮，我想要的方式，但我不能得到标题在我的图标/图像右。附件是我在CSS样式表中添加text-align:center时按钮的屏幕截图。关于如何在我的图标图像中间设置按钮标题的任何想法？我想在圆圈内显示“学生”标签

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;

 }

---

我对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 */
}

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

如果这不起作用，请告诉我，因为还有其他一些可能的解决方案。一种是使用边距：0自动作为标题的中心

我希望这有帮助

如果您已调用

addStyleName（“中间文本”）

在本机按钮上，以下CSS将居中显示文本：

以下CSS将标题置于换行符的中心：

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

---

我尝试添加您建议的CSS，它在图像右侧显示了标题。我添加了我在那个特定按钮上使用的CSS。在图片的中间没有显示标题，问题是我的图像大小。我得把它配起来。谢谢你的邀请help@Warz如果不能解决您的问题，为什么您会接受这个答案？@b1naryatr0phy我接受这个答案的原因是因为提供了css。我最终使用了

文本对齐

和

空白

属性以及调整图像大小。我添加了CSS。我试图通过弄乱图像（圆圈）和标题位置来实现您的方法。你能详细说明一下吗？