Check box vertical alignment is wrong: label is down and the check box is up

Question

The check box and label are not aligned on the same line.

I tried setting vertical align : middle, display : inline-block, but it didn't work at all.

ruleHtmlBody += '<div class="xx-checkbox checkbox-primary" style="padding-left: 10px;display:inline-block;">' +

    '<input class="xx-config-rules col-md-1" ruleid = "' + rulesList[i].Id + '" id="' + id + '" type="checkbox"' + ischeckedString + '/>' +

    '<label class="col-md-11" for="' + id + '">' + rulesList[i].Name +

    '<a id="' + idHelp + '" type="button" class="helptooltip gh" data-trigger="hover" data-toggle="popover" data-content="' + rulesList[i].Description + '"></a></label>' +
'</div>';

Output:

[] 
   lable1
[]
   lable2

expected output is :

[] lable1
[] lable2

Answer 1

Use this code to solve your problem.

.xx-checkbox{
  display:flex;
  align-items:center;
}

Answer 2

The inline-block element on the right side will align vertically in the middle relative to the inline-block element on the left side. This only works if the element on the left side has a height.

div {
    display: inline-block; /* your inline style */
    padding-left: 10px;    /* your inline style */
    font: normal 16px/1.5 sans-serif; /* font only for testing */
}
div input, div label {
    display: inline-block;
    vertical-align: middle;
    font: inherit;
}
div input {
    width: 20px;
    height: 20px; /* height required */
}