CSS 水平方向中央揃えの概要_html/css_WEB-ITnose

まえがき

多くの投稿を読んだ後、初心者がすぐに始めることを直接可能にする中央揃えのレイアウトは存在しないことがわかりました。そこで、私のちょっとした中央寄せレイアウトの蓄積とも言えるまとめを、初心者にもすぐに使えるようにまとめてみました。

1. 要素の分類

1. インライン要素

インライン要素は、インライン要素とも呼ばれ、複数の要素を 1 行に表示できます。注: 要素の高さ、幅、上下の余白は設定できません。要素の高さと幅は、要素に含まれるテキストまたは画像の高さと幅になります。

インライン要素には次のものが含まれます:

、、
、、、、、、< ;var>、、

もちろん、次のコードを使用してブロック レベルの要素に変換できる場合もあります:

display: block;

2. ブロック レベルの要素

ブロックレベルの要素、占有 1 つの行に、他の要素は別の行に配置する必要があります。注: 要素の高さ、幅、および上下の余白を設定できます。要素の幅が設定されていない場合は、親コンテナの 100% になります。

ブロックレベルの要素には、

、

、

...

、

、
、

、が含まれます。 、

、

、

同様に、次のコードを使用してブロックレベル要素をインライン要素に変更することもできます:

display: inline;

3.はじめに

インライン ブロック要素はインライン要素と似ており、1 行に表示できます。注: 要素の高さ、幅、行の高さ、上下の余白はすべて設定できます。

インライン ブロック要素には次のものが含まれます: 、

display: inline-block;

2. 左右のマージン適応メソッドを使用します: margin: 0 auto; /*このメソッドを使用するには、インライン ブロック要素になる必要があり*、固定幅が必要です*/

b. 左マージン メソッドと右マージン メソッドも使用します:

width: 500px

height: 30px; :relative;

margin-left: 50%;

left: -250px; /*250px は要素の幅を 2 ​​で割ったものであり、配置する必要があります*/



c。 center; / *このメソッドを使用するにはインライン要素になる必要があります*/

d。幅が不確かな要素の場合は、テーブルに margin: 0 auto; を使用できます。 center:

table{

margin: 0 auto;

HTML code:

>

したい水平方向に中央揃えにしてください！

e. 幅が不定の要素の場合は、親要素の Position を指定して、left: -50% と left: 50% をそれぞれ設定し、水平方向の中央揃えを実現します。 .father{

位置: 相対;

左:50%;

幅: 960px;

高さ: 300px;

背景: yellow;

}

.children{

高さ: 30px;

背景:#ccc;

位置: 相対;

left:-50%;

}

HTML コード:

aaaaaaaa















このウェブサイトの声明

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



ホットAIツール



Undresser.AI Undress

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



AI Clothes Remover

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



Undress AI Tool

脱衣画像を無料で



Clothoff.io

AI衣類リムーバー



AI Hentai Generator

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

もっと見る



人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

レポ：チームメイトを復活させる方法

4週間前 By 尊渡假赌尊渡假赌尊渡假赌

ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法

3週間前 By 尊渡假赌尊渡假赌尊渡假赌

スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？

3週間前 By DDD

R.E.P.O.ファイルの保存場所：それはどこにあり、それを保護する方法は？

3週間前 By DDD

もっと見る



ホットツール



メモ帳++7.3.1

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



SublimeText3 中国語版

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



ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境



ドリームウィーバー CS6

ビジュアル Web 開発ツール



SublimeText3 Mac版

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

もっと見る



ホットトピック

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

7316

9

Java チュートリアル

1625

14

CakePHP チュートリアル

1349

46

Laravel チュートリアル

1261

25

PHP チュートリアル

1208

29

もっと見る

Related knowledge

公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？ Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、

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

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

WebページのPNG画像にストローク効果を効率的に追加する方法は？ Mar 04, 2025 pm 02:39 PM

この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています

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

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

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

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

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

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

HTML5＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？ Mar 12, 2025 pm 04:05 PM

この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします

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

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

See all articles



福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて 免責事項 Sitemap

© php.cn All rights reserved