gwt复选框文本对齐

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

enter image description here

我试图添加填充，但这并没有帮助。向左侧添加填充效果不错，但填充到顶部不起作用。

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; 
}

可能是什么问题？

来源

2014-01-28 Bennet

不，它不工作。 – Bennet

什么不工作？你已经评论你的问题...我不确定你在说什么！ – Onkar

这是一个已知的行为。添加vertical-alignsub or middle到label（这取决于标签font-size上）

label 
{ 
    vertical-align : middle; 
}

另一种解决方案不依赖于CSS和字体大小将是单独的表行的checkBox和label（又有些css来保持它一起:(但是这将是一个时间和防呆）

EDITS：

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);

输出：

enter image description here

正常的字体大小

enter image description here

来源

2014-01-29 03:38:53 Onkar

你对字体大小是正确的，但垂直对齐无助于：:( – Bennet

你尝试过水平面板吗？它与中间字体大小完全一致，现在唯一的痛苦就是通过css将它们绑定在一起，因为它们可能会倾向于 – Onkar

@Bennet检查修改后的答案，它完美的工作！没有必要使用InlineLabel作为:) :) – Onkar

其实你的CSS应该针对复选框标签，而不是复选框。所以尝试这样的事情

input [type =“checkbox”] + label {padding-top：5px; vertical-align：top; }

来源

2014-01-29 03:43:18 outellou

什么对我来说是\t输入[type =“checkbox”] { \t \t vertical-align：middle; \t \t} \t \t 输入[类型= “复选框”] +标签{ \t \t垂直对齐：中部; \t} – decal

gwt复选框文本对齐

回答

相关问题