コンテナ Div 内の要素を垂直方向に整列するにはどうすればよいですか?

コンテナ Div 内の垂直要素の配置

コンテナ Div 内で 2 つの要素を垂直に配置しようとしています。 phrogz.net のチュートリアルでは望ましい結果が得られませんでした。この記事では、垂直方向の配置を実現する 2 つの効果的な方法について説明します。

CSS Flexbox を使用する方法:

CSS Flexbox は、要素を垂直方向に中央揃えする効率的な方法を提供します。

<前>

コンテナ{

display: flex; 
flex-direction: column; 
justify-content: center; 
align-items: center; 
height: 300px;

}

flex-direction を 'column' に設定すると、アイテムは垂直に積み重ねられ、'justify-content: center' と 'align' -items: center' は、それぞれ垂直方向と水平方向の中央揃えを保証します。

を使用する方法CSS テーブルと位置指定:

この方法には、テーブル プロパティと絶対位置指定が含まれます:

<br>body {</p>
<pre class="brush:php;toolbar:false">display: table;
position: absolute;
height: 100%;
width: 100%;

}

コンテナ{

display: table-cell;
vertical-align: middle;

}

ここではボディ要素をテーブル、コンテナ要素をテーブルのセルとしています。 'vertical-align' を 'middle' に設定すると、本文内でコンテナが垂直方向に整列します。

どの方法を選択するか:

簡素化と効率化のため、Flexbox を使用します。特に幅広いレイアウト オプションと応答性の高い性質により、推奨されます。 Flexbox は、古いバージョンの IE を除き、ブラウザでも広くサポートされています。

以上がコンテナ Div 内の要素を垂直方向に整列するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。