Css gwt复选框文本对齐 我更改了GWT中的复选框样式，但是文本没有出现在中间（垂直）。它出现在顶部

我试着添加填充物，但没用。向左侧添加填充效果很好，但向顶部添加填充效果不好

label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 25px;
    padding-top: 5px;
    margin-right: 5px;
    font-size: 12px;
}

input[type=checkbox] {
    display: none;
    padding-top: 5px;
}

label:before {
    background-image: url(images/csscheckbox.png);
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-right: 10px;
    position: absolute;
    left: 0;
    /*border-radius:5px 5px 0px 0px;*/
}

   .gwt-CheckBox {
    padding-top: 5px;
}

.gwt-CheckBox label:before {
    padding-top: 5px;
}

input[type=checkbox]:checked+label:before {
    background-position: 0 -22px;
    background-image color: aqua;
    font-size: 12px;
    text-align: center;
    line-height: 13px;
}

.agreement {
    margin-left: 5px;
}

---

可能是什么问题？

这是一个已知的行为。将

垂直对齐

子对齐或中间对齐

添加到

标签

（这取决于标签

字体大小

）

另一个不依赖css和字体大小的解决方案是将

复选框

和

标签

分隔在一个表行中（再次使用css将其保持在一起：（但这将是一次性的，而且是傻瓜式的）

编辑：

HorizontalPanel horizontalPanel = new HorizontalPanel();
horizontalPanel.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
CheckBox box = new CheckBox();
InlineLabel inlineLabel = new InlineLabel("Option1");
horizontalPanel.add(box);
horizontalPanel.add(inlineLabel);
RootPanel.get().add(horizontalPanel);

输出：

正常字体大小

---

实际上，CSS应该以复选框标签为目标，而不是复选框。所以请尝试类似的方法

输入[type=“checkbox”]+标签{填充顶部：5px； 垂直对齐：顶部；}

---

什么不起作用？你已经对你的问题发表了评论…我不确定你指的是什么！你在字体大小方面是对的，但垂直对齐没有帮助..：（你试过水平面板吗？无论字体大小，它都会在中间完全对齐。现在唯一的问题是通过css将它们绑定在一起，因为它们可能会占用太多的水平空间。@Bennet check modified Response它工作得很好！不需要css，因为使用了InlineLabel:）是的，就字体大小而言，你说的是对的。但是，我们不能因为这个原因简单地增加字体大小。它在页面中可能看起来很奇怪。不管怎么说，它现在看起来也很奇怪。@Bennet这只是一个建议。它也适用于正常的字体大小。检查编辑…对我有效的是输入[type=“checkbox”]{vertical align:middle；}输入[type=“checkbox”]+标签{垂直对齐：中间；}

HorizontalPanel horizontalPanel = new HorizontalPanel();
horizontalPanel.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
CheckBox box = new CheckBox();
InlineLabel inlineLabel = new InlineLabel("Option1");
horizontalPanel.add(box);
horizontalPanel.add(inlineLabel);
RootPanel.get().add(horizontalPanel);

label {
    position: static;
    align-self: center;    
 }