things_html/css_WEB-ITnose をセンタリングする

センタリングに関すること

最近、対処が必要なセンタリングの問題がいくつか発生しました。ここでは、発生した問題の概要といくつかの解決策を示します。

水平方向テキストの中央揃え

text-align:center;

要素を水平方向に中央揃えすると、コンテンツがインラインまたはインラインブロックになることがわかります。テキスト以外のシナリオでは、パディングによって実際に同じ効果が得られます。これは内容物に応じて調整できます。そうしないと、外容器の幅が固定されません。

テキストが縦方向中央に配置されます

テキストが 1 行で縦方向中央に配置される場合

line-height: 30px;height: 30px;

複数行の場合は、これを考慮できます

padding: 30px 0;

これ 上下の間隔は同じで、複数行の圧迫はありません

画像は中央に配置されます

ここではいくつかのシナリオを示します 1. コンテナーは相対的に大きく、コンテナと画像の幅と高さが固定されているため、上記のアイデアを使用するのは非常に簡単です。解決は簡単です。インライン + 行の高さまたはインライン + パディング

//css.wrap0 {    height: 300px;    width: 100%;    text-align: center; } .c0{    line-height: 300px;    display: inline-block;}

//dom<div class="wrap0">    <div class="c0">我好</div></div>

2 コンテナは比較的大きいのですが、コンテナと画像の幅と高さが固定されていないため、画像を水平方向にどのように適応的に処理するかは、インライン要素のテキストの中央揃え方法を使用することで実現できますか? 。 垂直方向では、テキストを垂直方向に中央揃えする他の方法 (vertical-align、インライン要素を中央揃えにする) があるかどうかを実際に検討できます。そう考えると、vertical-align は複数の要素の位置合わせ方法なので、別の要素を非表示にすることも検討できるかもしれません。

//css  .wrap1 {    height: 100%;    width: 100%;    position: fixed;    text-align: center; }    .c1 {    height: 100px;    width: 100px;    background-color: gray;    display: inline-block;    vertical-align: middle; } .c2 {     height: 100%;    background-color: green;    display: inline-block;    vertical-align: middle;    width: 0; }

//dom<div class="wrap1">    <div class="c1"></div>    <div class="c2"></div></div>

3 コンテナは比較的小さいですが、コンテンツは比較的大きいです。まず、水平方向の処理方法を見てみましょう。をコンテナ内に配置すると、コンテンツがコンテナの左側に整列されます。理論的には、整列するには内側のコンテナを左側に移動する必要があります。ここで問題となるのは、どのくらい移動する必要があるかということです。

//考虑到方向position = (width[容器] - width[内容])/2

実際には幅の違いの 1/2 です。それで、残りの問題は、どうやってそこまで移動するかということです。 一般的な位置関連のスタイルには、top|left|right|bottom、margin、position、left が含まれます。また、コンテンツの left が 50% に設定されている場合、実際には width[container]/2 の値に基づきます。それが出てきて、width[content]/2を実装したい場合は、コンテンツの外側に要素をネストするだけです。この要素はコンテンツと同じ幅と高さを持ち、コンテンツのmargin-leftを50％に設定します。 width[content]. ]/2 を実現するには、式が負であることを考慮して、margin-left を 50% にする必要があります。コード

 .wrap1 { height: 100px; width: 200px; margin: 0 auto; text-align: center; border: 1px solid red; position: relative; }     .wrap2 { height: 100px; width: 300px; margin: 0 auto; text-align: center; border: 2px solid blue; position: absolute; left: 50%; }    .c1 { width: inherit; height: inherit; background-color: gray; margin-left:-50%; }

 <div class="wrap1">    <div class="wrap2">        <div class="c1"></div>    </div></div>

を直接見ることができます。

ここに落とし穴があります。c1 要素が inline-block スタイルの場合はどうなりますか?

同時に、この効果を垂直方向に実現したい場合はどうなりますか? 、これをしてください。 上記の方法は簡単に思いつくので、ぜひ試してみてください。 実際、これは不可能です。 margin-top の値は、親要素の高さではなく幅に基づいて計算されます。それで。 。 。 。 特別な方法で計算方法を変更することもできます。たとえば、マージンを親要素の高さに基づいて計算すると、次のコードを上記の Wrap1 スタイルに追加するだけで済みます。

 -webkit-writing-mode: vertical-rl; /* for browsers of webkit engine */ writing-mode: tb-rl; /* for ie */

このスタイルを使用しない場合は、js の組み合わせを使用してマージン値を計算することもできます

もう少し拡張

実際、位置を比例的に計算する場合は、CSS3 でtranslate を使用すると、DOM 構造がより簡潔になります。 まず、コードを見てみましょう。コンテナがコンテンツより大きい場合:

 .wrap1 { width: 200px; height: 300px; margin: 300px auto; position: relative; border: 1px solid red; }    .c1 { width: 100px; height: 200px; position: absolute; top: 50%; left: 50%; background-color: gray; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

<div class="wrap1">    <div class="c1"></div></div>

上記のコードは、コンテンツがコンテナより大きい場合にも適用できます

リファレンス

1. CSS 書き込みモード
2. マージン系列の割合