Question

我正在使用1140 CSS grid并且有一行包含三个单元格，如下所示：

 <div class="row">
    <div class="span4"></div>
    <div class="span4">
       <p class="pText ui-highlight aCent">Some text.</p>
       <div data-role="controlgroup" data-type="horizontal">
           <a href="#" data-role="button" data-inline="true" data-theme="e" data-iconpos="none">data</a>
       </div>
    </div>  
    <div class="span4">
      <ul data-role="listview" data-inset="true" data-divider-theme="a" data-theme="c">
         <li data-role="list-divider" class="ui-corner-top input-divider"><span class="ui-divider-text">header</span></li> 
         <li data-icon="false" >Some<span class="ui-li-count pusher">12</span></li>
         <li data-icon="false" >Thing<span class="ui-li-count pusher">34</span></li>
         <li data-icon="false" >Wicked<span class="ui-li-count pusher">45</span></li>
      </ul>
   </div>
 </div>

我正在寻找一种垂直居中三个 div.span4 元素的方法，无法让它工作......

我从1140开始使用这个CSS：

  .row {
     margin: 0.5em auto;
     overflow: hidden;
     width: 100%;
     }
   .span4 {
     width: 28%;
     margin-right: 2%;
     }

感谢您的任何提示。我在这里绝望了..

Answer 1

除非你确切知道这些<div>的高度（意味着你可以设置明确的高度），否则你不能用普通的CSS 来做到这一点。普通的HTML“flow”具有垂直对齐顶部的元素 - 就是它的样子。

现在有几种方法可以解决：

1）重新思考你的设计。他们真的需要垂直居中吗？设计是否可以通过顶部对齐的方式实现？

2）使用JavaScript - 使用jQuery或类似的东西，你可以获得最高的.span4的高度，然后计算其他<div>的必要边距。但是，这会变得混乱，如果有人关闭JS，显然不会起作用。

3）（我讨厌建议这一点）尝试转换为表格。是的，它是大约1998年的HTML，但您可以为表格单元格设置vertical-align属性。这不是语义，维持是一种痛苦，而那里的所有Standarist都会嘲笑你。 ; ）

如何使用CSS垂直对齐div元素？

1 个答案: