2つのdiv内の中心要素を垂直方向に

Question

どのようにして4つのボタンをそれぞれのdiv内に縦横に配置することができますか？

更新：いいえFlexboxしてください。私はその贅沢はありません。

#outer { 
 
    width: 400px; 
 
    height: 200px; 
 
    background-color: black; 
 
    display: table-cell; 
 
} 
 

 
#innerOne { 
 
    width: 400px; 
 
    height: 100px; 
 
    background-color: red; 
 
    vertical-align: middle; 
 
} 
 

 
#innerOne { 
 
    width: 400px; 
 
    height: 100px; 
 
    background-color: blue; 
 
    vertical-align: middle; 
 
}

<div id="outer"> 
 
    <div id="innerOne"> 
 
    <button>One</button> 
 
    <button>Two</button> 
 
    </div> 
 
    <div id="innerTwo"> 
 
    <button>Three</button> 
 
    <button>Four</button> 
 
    </div> 
 
</div>

私は "1"、 "2" は、垂直方向と水平方向青のdivの内側中心になりたいです。黒いdivの "three"と "four"と同じです。

私は望む効果がなくても、テーブルとテーブルセルの表示を設定することで、さまざまなオプションを試しました。

Answer 1

、あなたは中央インラインコンテンツのボックスのheightvertical alignに等しいline-heightを使用することができます。

と水平部

#outer { 
 
    width: 400px; 
 
    height: 200px; 
 
    background-color: black; 
 
    /*display: table-cell;useless here i believe*/ 
 
    text-align:center; 
 
} 
 

 

 
#innerOne, 
 
#innerTwo { 
 
    width: 400px; 
 
    height: 100px; 
 
    line-height:100px; 
 
    background-color: blue; 
 
} 
 
#innerOne { 
 
    background-color: red; 
 
}

<div id="outer"> 
 
    <div id="innerOne"> 
 
    <button>One</button> 
 
    <button>Two</button> 
 
    </div> 
 
    <div id="innerTwo"> 
 
    <button>Three</button> 
 
    <button>Four</button> 
 
    </div> 
 
</div>

ため text-align

Answer 2

ボタンはインラインブロックなので、擬似要素を使用してボタンを垂直にセンタリングすることができます。擬似要素はコンテナの高さ（.inner）を持ち、垂直方向に整列され、高さの低いすべてのインラインブロックが中央に配置されます。 水平にセンタリングするには、text-align: centerをコンテナにセットしてください（.inner）。 1ライン分の

#outer { 
 
    width: 400px; 
 
    height: 200px; 
 
    background-color: black; 
 
} 
 

 
.inner { 
 
    width: 400px; 
 
    height: 100px; 
 
    text-align: center; 
 
} 
 

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

 
#innerOne { 
 
    background-color: red; 
 
} 
 

 
#innerTwo { 
 
    background-color: blue; 
 
}

<div id="outer"> 
 
    <div id="innerOne" class="inner"> 
 
    <button>One</button> 
 
    <button>Two</button> 
 
    </div> 
 
    <div id="innerTwo" class="inner"> 
 
    <button>Three</button> 
 
    <button>Four</button> 
 
    </div> 
 
</div>