ページ要素を中央に配置するためのいくつかの方法_html/css_WEB-ITnose

1 はじめに

ページ レイアウトを行うとき、多くの場合、いくつかのページ要素を中央に配置する必要があります。もちろん、要素の上部と左を中央に設定することはできますが、親コンテナのサイズが変更された場合、ユーザーのモニターの解像度が変更されたときに子要素の上部と左を変更して中央に配置する必要があります。テストマシンが異なるとインターフェイスが乱雑になる可能性があるため、コードのメンテナンスの容易さや、異なる解像度のディスプレイへの適応性の観点から、この固定値を設定する方法は明らかに不格好です。したがって、ページ レイアウトを行うときは、固定値レイアウト方法の使用を最小限に抑えるようにしてください。ページ要素を中央揃えにするいくつかの方法を次に示します。

1Div 中央揃え

1.1 左右中央揃え

親ウィンドウで text-align:center を設定する このメソッドはインライン要素に対してのみ機能するため、中央揃えの div に display:inline-block を設定することに注意してください。次のコードの赤い線は、itemContainer 内の 3 つの div を中央に配置する方法を示しています。

単一の要素を中央に配置したい場合は、margin:0auto を使用することもできますが、この方法では親ウィンドウ内の複数の要素を中央に配置することはできません。

1.2 上下の中央揃え

text-align 属性は、上下の中央揃えにのみ使用できます: top:50%; margin-top:-40px。 top:50% は、div の上部を親コンテナーの高さの 50% に設定しますが、div 自体には高さがあり、margin-top:-40px は、div 自体の高さの半分を上に移動することを意味します。親コンテナは overflow:auto を設定する必要があることに注意してください。そうしないと、上記の設定が親コンテナのサイズに影響します。

上下左右を同時にセンタリングする必要がある場合は、2.1で示した方法と併用してください。

次のコードの赤い線は、itemContainer をページ全体の中央に配置する方法を示しています。

2 テキストの中央揃え

方法 1: div タグ内にテキストを配置し、div 中央揃え方法に従って中央揃えを設定します

方法 2: 左と右の中央揃え text-align:center、上下の中央揃えが可能次のコードに示すように、テキストの親コンテナーに設定される行の高さは、親コンテナーの高さと同じになります。

3 背景画像のセンタリング

背景を設定: 50% 50% これら 2 つのパラメータを調整して、上下のセンタリングのみ (背景: 0% 50%) と左右のセンタリングのみ (背景: 50% 0%) を使用できます。 ）。

4 つのテスト ケース

<%@page contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%>

< ;head>

style="position:relative;width:400px;height:80px;outline:solid 2px#ff0000;text- align:center;top:50%;margin:0 auto;margin-top:-40px">

「アイテム」> /body>