0

我在 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+。

4

3 回答 3

2

这个怎么样？

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

于 2013-08-14T10:10:14.570 回答
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]-->
于 2013-08-14T10:10:40.967 回答
1

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

对于您的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 相对/绝对定位错误，具体而言， http://www.satzansatz.de/cssd/onhavelayout.html#rp

于 2013-08-14T11:15:25.387 回答