html - 在 div 中垂直居中元素时如何避免硬编码行高？

Question

我在 3 行文本旁边有一个复选框。我希望将复选框垂直居中放置在这些文本行上:

   A
[] B
   C

我正试图通过 div 容器来做到这一点，同时抵制恢复到表格的巨大诱惑。到目前为止，这是我的代码:

<div style="overflow:auto;">
   <div style="height:57px; float:left;margin-right:15px;">
      <input style="vertical-align:middle;height:100%" type="checkbox" 
             name="theCheckbox" id="checkboxId">
   </div>
   <div style="float:left;">
       A<br/>
       B<br/>
       C
   </div>
</div>

JSFiddle

虽然上述“有效”，但我对硬编码的高度不满意。将 57px 更改为 100% 会使复选框消失(计算高度变为 0)。从 div 中删除高度样式也会导致复选框消失。任何人都可以提出改进或替代解决方案来实现我的目标吗？

编辑:我必须在其他浏览器中支持 IE7+。

Answer 1

您可以像这样将元素视为表格(而不实际使用表格):

HTML

<div id="container">
   <div class="tableCell">
     <input type="checkbox" name="theCheckbox" id="checkboxId">
   </div>
  <div class="tableCell">A<br/>B<br/>C</div>
</div>

CSS

#container { display: table; }

.tableCell { 
    display: table-cell;
    vertical-align: middle; }

在这里查看 fiddle :http://jsfiddle.net/QpnkV/2/

为了向后兼容，考虑像这样在你的文档头中使用脚本:

<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><![endif]-->

<!--[if IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->