CSSを使用してdiv要素を垂直に整列する方法は？

Question

私は1140 CSS gridを使用し、そのような三つのセルと行を持っている：私は縦に3つのdiv.span4要素をセンタリングする方法を探していますし、それを取得することはできません

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

仕事は...

私は1140年からこのCSSを抱えている：任意のヒントについて

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

感謝を。あなたは（あなたが明示的な高さを設定することができることを意味し）されます正確にどのように背の高いこれらの<div>年代知っている限り、私はあなたが、プレーンバニラCSSでこれを行うことはできません..ここ

Answer 1

を必死つもりです。通常のHTMLの「フロー」は、要素を上に垂直に揃えています。

1）あなたのデザインを再考：

は今どこへ行くカップルの方法があります。彼らは本当に垂直に中心を置く必要がありますか？すべてのものが一番上に整列した状態でデザインを達成できますか？

2）JavaScriptを使用する - jQueryなどを使用して、最も高い.span4の高さを取得してから、もう一方の必要なマージンを計算することができます。<div>しかし、それは乱雑になり、誰かがJSをオフにしても明らかにうまくいかないでしょう。

3）（私はこれを示唆していません）テーブルに変換してみてください。ええ、それは1998年頃のHTMLですが、表のセルに垂直方向のアトリビュートを設定できます。それは意味論ではなく、維持する苦痛であり、そこにあるすべてのStandaristasはあなたを笑うでしょう。 ; ）