gwt 复选框文本对齐

Question

我更改了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;
}

可能是什么问题？

Answer 1

实际上，您的 CSS 应该针对 CheckBox 标签而不是 Checkbox。所以尝试这样的事情

input[type="checkbox"] + label{ padding-top : 5px ; 垂直对齐：顶部； }

Answer 2

这是一种已知行为。将vertical-align sub or middle 添加到label（这取决于标签font-size）

label
{
    vertical-align : middle;
}

另一个不依赖于 css 和字体大小的解决方案是将checkBox 和 label 分隔在一个表格行中（再次使用一些 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);

输出：

普通字体大小

Answer 3

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