Question

我有三个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;}

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

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

DEMO：http://jsfiddle.net/pavloschris/A453K/2/

如何垂直对齐多行内容？

1 个答案: