Search code examples
htmlcsscheckboxvertical-alignment

Vertically center a checkbox within a div

I have a checkbox within a div that is appearing higher than the text I want it to be aligned with.

Here's how it appears in Firefox:

enter image description here

As you can see, the checkbox is just a few pixels higher than the text. I have tried applying various padding / margins, including negative values, but to no avail.

HTML:

<div id="read-confirm-box">
  I Have read the above 
  <input type="checkbox" id="checkbox" />
</div>

CSS:

#read-confirm-box
{
    color: #FFF;
    width: 180px;
    font-size: 12px;
    background-color: #333;
    border-radius: 3px;
    padding: 6px 11px;
    margin: auto;
    float: left;
}

#checkbox 
{
    /* Empty */
}
Solution

  • check this jsFiddle

    HTML

    <div id="read-confirm-box">
  I Have read the above 
  <input type="checkbox" id="checkbox" />
</div>

    CSS

    #read-confirm-box
{
    color: #FFF;
    width: 180px;
    font-size: 12px;
    background-color: #333;
    border-radius: 3px;
    padding: 6px 11px;
    margin: auto;
    float: left;
}

#checkbox 
{
    position: relative;
    top: 3px;
}