垂直居中div中的复选框

Question

checkbox中div的{​​{1}}高于我希望与之对齐的文字。

以下是它在Firefox中的显示方式：

如您所见，checkbox只比文字高几个像素。我尝试过应用各种填充/边距，包括负值，但无济于事。

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

Answer 2

你可以将文本和input都包装成div，这是一个很好的做法。

要相应地对齐包含divs的文本和控件，请使用display属性

尝试：

<强> 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

尝试使用以下css。

#checkbox {
    vertical-align: middle;
}

Answer 4

由于缺少reset.css，浏览器可能会更高（浏览器应用自己的默认设置）。

为了实用性，您应该使用label元素，而不是将输入和文本包装在额外的divs中。

为input和label提供相同的保证金，瞧！

<强> 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

非常简单的修复。 CSS：

#checkbox {
    vertical-align:middle;
}

Answer 6

或者作为替代方案，分散这个小提琴： Fiddle

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