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：

<input type="checkbox" name="theCheckbox" id="checkboxId"/>

<div id ="try">
   A<br/>
   B<br/>
   C
</div>

<强> CSS：

#checkboxId{
position:relative;
vertical-align:middle; 
}

#try{  
position:relative;
display:inline-block;    
vertical-align:middle; 
}

以下是JSFiddle

Answer 2

您可以将元素视为表格（实际上不使用表格），如下所示：

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

请参阅此处的小提琴：http://jsfiddle.net/QpnkV/2/

为了向后兼容，请考虑在dochead中使用脚本，如下所示：

<!--[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]-->

Answer 3

您可以使用绝对定位垂直放置复选框。

对于 HTML ，您可以按照以下步骤进行简化：

<div class="wrap">
    <input class="control" type="checkbox" name="theCheckbox" id="checkboxId">
    <div class="label">A
        <br/>B
        <br/>C
        <br/>D</div>
</div>

并应用以下 CSS ：

.wrap {
    border: 1px dotted gray;
    position: relative;
    overflow: auto; /* triggers hasLayout in IE7 */
}
.control {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.label {
    margin-left: 20px;
}

演示小提琴：http://jsfiddle.net/audetwebdesign/N23qr/

此处的权衡是您需要在margin-left容器上对.label进行硬编码，这比指定高度值的限制要小。

关于IE7的注意事项

要让position: relative能够正常使用.wrap，您需要确保IE7调用hasLayout属性，这可以通过应用overflow: auto来实现。有关详细信息，请参阅：IE7 relative/absolute positioning bug with dynamically modified page content，具体而言，http://www.satzansatz.de/cssd/onhavinglayout.html#rp

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

3 个答案: