html - 在 div 中垂直居中复选框

Question

我在 div 中有一个 checkbox，它的显示位置高于我希望它与之对齐的文本。

这是它在 Firefox 中的显示方式:

如您所见，复选框 仅比文本高几个像素。我尝试应用各种填充/边距，包括负值，但无济于事。

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

检查这个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;
}