-1

アンカーでラップされた複数行のコンテンツを持つ 3 つの 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;}
4

1 に答える 1

1

私はこのテクニックをよく使います：

CSS:

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

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

クラスを要素に追加すると、すべての第 1 レベルの子が垂直方向に配置されます。

デモ: http://jsfiddle.net/pavloschris/A453K/2/

于 2013-03-07T08:39:35.403 に答える