CSS_html/css_WEB-ITnose で中央揃えを実現する 7 つの方法-htmlチュートリアル-php.cn

.absolute-aligned {

ログイン後にコピー

position: relative; min-height: 500px;

ログイン後にコピー

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

ログイン後にコピー

" >

.absolute-aligned {

ログイン後にコピー

position: relative; min-height: 500px;

ログイン後にコピー

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

ログイン後にコピー

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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:53 AM

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

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

<div class="center">

ログイン後にコピー</div></div>

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

ログイン後にコピー</div></div>

</div>

ログイン後にコピー</div></div>

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

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

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

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

ログイン後にコピー</div></div>

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

ログイン後にコピー</div></div>

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

2. margin: auto centering

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

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

ログイン後にコピー</div></div>

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

ログイン後にコピー</div></div>

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

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

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

<div class="center-aligned">

ログイン後にコピー</div></div>

<div class="center-core">

ログイン後にコピー</div></div>

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

ログイン後にコピー</div></div>

</div>

ログイン後にコピー</div></div>

</div>

ログイン後にコピー</div></div>

CSS コード:

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

ログイン後にコピー</div></div>

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

ログイン後にコピー</div></div>

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

ログイン後にコピー</div></div>

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

.absolute-aligned {

ログイン後にコピー</div></div>

position: relative; min-height: 500px;

ログイン後にコピー</div></div>

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

ログイン後にコピー</div></div>

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

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

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

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

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

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

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

.absolute-aligned img {

ログイン後にコピー</div></div>

width: 50%;

ログイン後にコピー</div></div>

min-width: 200px;

ログイン後にコピー</div></div>

height: auto;

ログイン後にコピー</div></div>

overflow: auto; margin: auto;

ログイン後にコピー</div></div>

position: absolute;

ログイン後にコピー</div></div>

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

ログイン後にコピー</div></div>

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

ログイン後にコピー</div></div>

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

ログイン後にコピー</div></div>

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

ログイン後にコピー</div></div>

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

ログイン後にコピー</div></div>

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

ログイン後にコピー</div></div>

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

ログイン後にコピー</div></div>

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

ログイン後にコピー</div></div>

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

ログイン後にコピー</div></div>

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

ログイン後にコピー</div></div>

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

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

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

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

ログイン後にコピー</div></div>

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

ログイン後にコピー</div></div>

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

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

-webkit-box-align: center;

ログイン後にコピー</div></div>

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

-moz-box-align: center;

ログイン後にコピー</div></div>

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

-ms-flex-align: center;

ログイン後にコピー</div></div>

-webkit-align-items: center;

ログイン後にコピー</div></div>

align-items: center;

ログイン後にコピー</div></div>

-webkit-box-pack: center;

ログイン後にコピー</div></div>

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

原文はこちら

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7526

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

＆lt; Progress＆gt;の目的は何ですか要素？ Mar 21, 2025 pm 12:34 PM

この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合

＆lt; datalist＆gt;の目的は何ですか要素？ Mar 21, 2025 pm 12:33 PM

この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？ Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

＆lt; meter＆gt;の目的は何ですか要素？ Mar 21, 2025 pm 12:35 PM

この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？ Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？ Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

＆lt; iframe＆gt;の目的は何ですかタグ？使用する際のセキュリティ上の考慮事項は何ですか？ Mar 20, 2025 pm 06:05 PM

この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

Giteeページ静的なWebサイトの展開に失敗しました：単一のファイル404エラーをトラブルシューティングと解決する方法 Apr 04, 2025 pm 11:54 PM

GiteEpages静的Webサイトの展開が失敗しました：404エラーのトラブルシューティングと解像度Giteeを使用する

See all articles

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

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

2. margin: auto centering

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

.absolute-aligned {ログイン後にコピー</div></div> position: relative; min-height: 500px;ログイン後にコピー</div></div> background: hsl(200, 100%, 97%);ログイン後にコピー</div></div>

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

.absolute-aligned {
ログイン後にコピー</div></div>
position: relative; min-height: 500px;
ログイン後にコピー</div></div>
background: hsl(200, 100%, 97%);
ログイン後にコピー</div></div>