CSS_html/css_WEB-ITnose で中央揃えを実現する 7 つの方法

HTML 要素の中央揃えの実装は簡単そうに見えますが、実際は簡単ではありません

水平方向の中央揃えは簡単ですが、垂直方向の中央揃えはさらに難しく、水平方向と垂直方向の中央揃えはさらに困難です。レスポンシブ レイアウトのこの時代では、要素の幅と高さを固定するのは困難です。現在、いくつかの方法があります。この記事では、同じ HTML コードを使用して、浅いものから深いものまで各ステップを紹介します:

<div class="center">

<img src="jimmy-choo-shoe.jpg" alt="">

</div>

下の靴の画像は変更されますが、元のサイズは常に 500px × 500px で、テーマの背景色は HSL カラーを使用します

1. 水平方向に中央揃えにしますか? text -align を使用します

いくつかのシナリオでは、単純な方法が最良の方法です

div.center { text-align: center; background: hsl(0, 100%, 97%); }

div.center img { width: 33%; height: auto; }

ただし、この方法では画像を垂直方向に中央揃えにすることはできません。div にパディングを追加するか、margin-top を追加する必要があります。 div 内の要素に margin-bottom を追加します

2. margin: auto centering

も最初の方法と同じ制限付きで水平方向に中央揃えになります:

div.center { background: hsl(60, 100%, 97%); }

div.center img { display: block; width: 33%; height: auto; margin: 0 auto; }

注: この場合、display: block margin: 0 auto.

3 が必要です。 table-cell のセンタリング

display: table-cell を使用すると、水平および垂直のセンタリングを実現できます。多くの場合、空の要素を追加する必要があります。

<div class="center-aligned">

<div class="center-core">

<img src="jimmy-choo-shoe.jpg">

</div>

</div>

CSS コード:

.center-aligned { display: table; background: hsl(120, 100%, 97%);width: 100%; }

.center-core { display: table-cell; text-align: center; vertical-align:middle; }

.center-core img { width: 33%; height: auto; }

width: 100% は div の折りたたみを防ぐためであり、外側のコンテナは垂直方向の中央に配置される高さが必要であることに注意してください。 垂直方向に中央揃えの要素が .body に配置されている場合、HTML と body の高さを設定する必要があります。IE8 以降を含むすべてのブラウザーで有効です。さまざまなブラウザでうまく動作します。唯一の欠点は、外側の容器が高さを宣言しなければならないことです。新しい方法が提案されています: CSS 変換の使用: 水平方向と垂直方向の両方のセンタリングをサポートします:

.absolute-aligned {

position: relative; min-height: 500px;

background: hsl(200, 100%, 97%);

には次の欠点があります:

CSS 変換には、異なるブラウザーまたは -webkit 用の特定のプレフィックス (-moz または -o) が必要です。

IE の下位バージョン (IE8 以下) では無効です

絶対配置されたコンテンツから高さを取得できないため、外部コンテナは高さを設定する (または他の方法で取得する) 必要があります。コンテンツにテキストが含まれている場合、現在のブラウザー合成テクノロジーはテキストを非常に曖昧に解釈します

6. Flexbox を使用して中央揃えにする

属性変数と特定の接頭辞がなくなると、この方法が推奨される中央揃えソリューションになる可能性があります。

多くの点で、フレックスボックスは最も単純な解決策ですが、さまざまな古風な構文と IE の下位バージョンの制約があります (ただし、display: table-cell は許容可能な解決策です):

.absolute-aligned img {

width: 50%;

min-width: 200px;

height: auto;

overflow: auto; margin: auto;

position: absolute;

top: 0; left: 0; bottom: 0; right: 0;

.center { background: hsl(180, 100%, 97%); position: relative; min-height: 500px; }

.center img { position: absolute; top: 50%; left: 50%;

transform: translate(-50%, -50%); width: 30%; height: auto; }

.center { background: hsl(240, 100%, 97%); display: flex; justify-content: center; align-items: center; }

.center img { width: 30%; height: auto; }

.center { background: hsl(240, 100%, 97%);

display: -webkit-box; /* OLD: Safari, iOS 6 and earlier; Android browser, older WebKit */

display: -moz-box; /* OLD: Firefox (can be buggy) */

display: -ms-flexbox; /* OLD: IE 10 */

仕様が形成され、ブラウザがサポートするようになったので、フレックスボックスのレイアウトとその使用方法について詳しく書きました。

7. 中央揃えに calc を使用する

フレックスボックスよりも多用途いくつかのシナリオ:

display: -webkit-flex; /* FINAL, PREFIXED, Chrome 21+ */

display: flex; /* FINAL: Opera 12.1+, Firefox 22+ */

明らかに、calc を使用すると、現在のページ レイアウトで計算を実行できます。上の例では、50% はコンテナ内の要素の中点ですが、これを単独で使用すると、画像の左上隅が

の中央になります。サイズがそれぞれ画像の幅と高さの半分になるように、幅と高さを少し戻す必要があります。式は次のとおりです:

-webkit-box-align: center;

現在のブラウザでは、コンテンツが固定され、サイズがわかっている場合にこのテクノロジーが最も効果的に機能することがわかります:

-moz-box-align: center;

calc フレックスボックスのようなメソッドはたくさんあります 潜在的な欠点: サポートFirefox 4 以降のブラウザでは、プレフィックスを追加する必要はありません。画像の中央揃えのための完全なコード:

-ms-flex-align: center;

-webkit-align-items: center;

align-items: center;

-webkit-box-pack: center;

もちろん、疑似要素を使用して垂直方向に中央揃えするなど、他にも多くの方法があります。これらのテクニックを理解することで、Web 開発者は行き詰ることなく中央揃えの問題に対処できるようになります。

原文はこちら

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。