html - Vertically center a checkbox within a div -

i have checkbox within div appearing higher text want aligned with.

here's how appears in firefox:

as can see, checkbox few pixels higher text. have tried applying various padding / margins, including negative values, no avail.

html:

<div id="read-confirm-box">   have read 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 */ } 

check jsfiddle

html

<div id="read-confirm-box">   have read 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; }