Vertically center a checkbox within a div

Question

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:

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 */
}

Answer 1

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

Answer 2

You can wrap both text and input into a div, It's a good practice.

To align both the divs containing text and control accordingly, use display properties

Try:

HTML

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

---

 <label for="checkbox">I Have read the above </label>
 <input type="checkbox" id="checkbox" />

---

<span>I Have read the above </span>
<span><input type="checkbox" id="checkbox" /></span>

CSS

.inline{
    display:inline-block;
    vertical-align:middle;
}

Fiddle Example

Updated

Answer 3

Try to use following css.

#checkbox {
    vertical-align: middle;
}

Answer 4

The checkbox is likely higher for lack of a reset.css (browsers apply their own defaults).

For usability, you should use the label element, rather than wrapping the input and text in extra divs.

Give the input and label the same margin and voila!

HTML

<div id="read-confirm-box">
    <input type="checkbox" id="checkbox" />
    <label for="checkbox">I Have read the above </label>
</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;
}

input {
   margin: 3px;
}

label {
    float:left;
    margin: 3px;
}

http://jsfiddle.net/djungle/x6EUp/1/

Answer 5

Pretty easy fix. CSS:

#checkbox {
    vertical-align:middle;
}

Answer 6

Or as an alternative, forking that fiddle: Fiddle

#checkbox 
{
    vertical-align:-2px;
}