如何垂直对齐多行内容？答案

【问题标题】：How can i vertical-align multiple line content?如何垂直对齐多行内容？
【发布时间】：2013-02-22 08:47:09
【问题描述】：

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

Here 是我的代码：

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

【问题讨论】：

@GMR 请不要删除代码，这是不可接受的。（您已将background:lightblue; url(imagini/arrow_fondsen.png); 更改为background:#ADD8E6;）
没看懂目标，哪部分内容应该以什么方式垂直对齐？
您希望.box_content 以.box_item 为中心？

标签： css html alignment vertical-alignment

【解决方案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/

【讨论】：

@Mr_Green 我不知道你所说的“黑客”是什么意思，但我想不是。我想这更像是一种“解决方法”。