gwt Checkbox Text alignment

Question

I changed the check box style in gwt, but the text is not appearing in the middle (Vertically). It appears on the top.

I tried to add padding, but that didn't help. Adding padding to the left works fine, but padding to the top doesn't work.

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

What could be the problem?

Answer 1

Actually your CSS should target the CheckBox Label instead of the the Checkbox. So try something like this

input[type="checkbox"] + label{ padding-top : 5px ; vertical-align: top; }

Answer 2

This is a known behavior. Add the vertical-align sub or middle to the label (this depends on the label font-size)

label
{
    vertical-align : middle;
}

Another solution to not depend on the css and font size will be to seperate the checkBox and label in a table row (again some css to to keep it together :( but it will be one time and fool-proof) .

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

Output :

Normal Font Size

Answer 3

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