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

Question

通过CSS我可以让v.native按钮看起来像我想要的方式，但我无法将标题放在我的图标/图像中间。附件是我添加文本时按钮的样子的屏幕截图-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（ “中心文本”）;

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

以下CSS会将换行符中的标题居中：

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

Answer 2

我对vaadin没有经验，所以如果我的建议与vaadin无关，我会道歉，但无论如何我都会继续前进！[/ p>

发布你拥有的代码（指定元素的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定位设置为relative，将#caption定位设置为absolute，则会将标题放在圆圈的右上角，并在其上方。然后，您可以将“顶部”属性设置为圆的总高度的一半，以将其放置在y轴上的圆心中。如果你将标题的左边属性设置为50％，然后给它一个等于宽度一半的负左边距，它应该完美居中。确保将#circle设置为相对定位，或者标题可能相对于整个页面绝对定位，而不仅仅是圆圈。

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

我希望这有帮助！