css - 如何垂直对齐多行内容？

Question

我有三个 div，它们在锚中包含多行内容。我尝试使用 display:table-cell 或 top:50% 和 margin-top:50% 但没有效果。我再次希望 .box_content 以 .box_item 为中心。

这是我的代码：

<div id="boxes_onze">
   <a href="#">
       <div class="box_item">
        <div class="box_content">Equity Funds</div>
       </div>
   </a>
   <a href="#">
      <div class="box_item">
        <div class="box_content">Fixed Income Funds</div>
      </div>
   </a>
   <a href="#">
      <div class="box_item">
        <div class="box_content">Mixed Funds</div>
      </div>
   </a>
</div>

和 CSS：

#boxes_onze{width:100%; margin-top:50px;}
#boxes_onze a{text-decoration:none; color:#3c9ccc; font-size:24px; font-family:HelveticaNeueTh; line-height: 24px;}
#boxes_onze .box_item{width:33%; margin-right:1px; height:77px; display:table-cell; vertical-align:middle;   background:lightblue; url(imagini/arrow_fondsen.png); position:relative; background-repeat:no-repeat; background-position: 95% center;}
#boxes_onze .box_item .box_content{width:136px; margin-left:13px;}
div{float:left;}

Answer 1

我经常使用这种技术：

CSS：

.valign-content:before { content : ''; display : inline-block; width : 0; height : 100%; vertical-align : middle; }

.valign-content>* { vertical-align : middle; display : inline-block; }

将类添加到元素中，所有第一级子级都将垂直对齐。

演示：http: //jsfiddle.net/pavloschris/A453K/2/