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