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複選框文本對齊

回答

相關問題