HTML+CSS学習メモ(15)
水平方向のセンタリングの設定 - インライン要素
実際の作業では、水平方向のセンタリングを設定する必要がある場面によく遭遇します。今日は水平方向のセンタリングを設定する方法を見ていきます。
設定する要素がテキストやピクチャなどのインライン要素の場合、親要素に text-align:center を設定することで水平方向のセンタリングが実現されます。以下のコード:
html コード:
<body> <div class="txtCenter">我是文本，哈哈，我想要在父容器中水平居中显示。</div></body>
css コード:
<style> div.txtCenter{ text-align:center; }</style>水平中央設定 - 固定幅ブロック要素
の場合要素をブロック要素に設定する場合、text-align: center は機能しません。この場合、 固定幅ブロック要素 と 可変幅ブロック要素 <🎜】 の 2 つの状況が考えられます。 > 。このセクションでは、まず固定幅のブロック要素について説明します。
固定幅 と ブロック の 2 つの条件を満たす要素は、「左右のマージン」の値を " に設定することで設定できます。 auto 」を使用してセンタリングを実現します。 div ブロック要素を水平方向の中央に設定する例を見てみましょう。
html コード:
<body> <div>我是定宽块状元素，哈哈，我要水平居中显示。</div></body>
<style>div{ border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:500px;/*定宽*/ margin:20px auto;/* margin-left 与 margin-right 设置为 auto */}</style>
margin-left:auto;margin-right:auto;
水平方向のセンタリングのまとめ - 幅可変ブロック要素の方法
実際の作業では、ページングなどの「幅が可変のブロック状要素」に対してセンタリングを行う必要が出てきます。 Web ページ上のナビゲーションはページネーションの数が定義されていないため、幅を設定することで柔軟性を制限することはできません。
可変幅のブロック要素を中央に配置するには 3 つの方法があります (現在、これら 3 つの方法がより頻繁に使用されます)。
1. テーブル タグを追加します。 2. インライン メソッドを設定します。 3. 位置を設定します。 :relative and left:50%;
1. table タグを追加します
ステップ 1: table タグ (、< ;tr>、
ステップ 2: このテーブルの「中央の左右のマージン」を設定します (これは固定幅ブロック要素と同じ方法です)。
例:
HTML コード:
<div><table> <tbody> <tr><td> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </td></tr> </tbody></table></div>
<style>table{ margin:0 auto;}ul{list-style:none;margin:0;padding:0;}li{float:left;display:inline;margin-right:8px;}</style>を実現するために使用されます。 2. インライン メソッド
を設定します。ブロック レベル要素の表示をインライン タイプに変更し、text-align:center を使用して中央揃え効果を実現します。次の例:
html コード:
<body><div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul></div></body>
<style>.container{ text-align:center;}.container ul{ list-style:none; margin:0; padding:0; display:inline;}.container li{ margin-right:8px; display:inline;}</style>3. 位置: 相対と左: 50% を設定します。
親要素に位置: 相対と左: 50% を設定します。要素は、水平方向のセンタリングを実現するために、position:相対と left:-50% を設定します。
コードは次のとおりです:
<body><div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul></div></body>
<style>.container{ float:left; position:relative; left:50%}.container ul{ list-style:none; margin:0; padding:0; position:relative; left:-50%;}.container li{float:left;display:inline;margin-right:8px;}</style>説明: 1. ウィンドウ幅の 50% だけ右に移動します。2. 要素幅の 50% だけ左に移動します。3. 中央に配置します。
これら 3 つの方法は広く使用されており、それぞれに独自の長所と短所があります。どの方法を選択するかは、特定の状況によって異なります。
垂直方向のセンタリング - 高さが親要素によって決定される単一行のテキスト
高さが親要素によって決定される単一行のテキストの垂直方向のセンタリング方法は、これを実現します。親要素の高さと行の高さを一致させるように設定します。次のコード:
<div class="container"> hi,imooc!</div>css代码：<style>.container{ height:100px; line-height:100px; background:#999;}</style>垂直中央揃え - 親要素の特定の高さの複数行テキスト (方法 1)
親要素の特定の高さの複数行テキスト、 picture、 ブロック要素 を垂直方向の中央に配置するには 2 つの方法があります。
方法 1: 挿入テーブル (tbody、tr、td を含む) タグを使用し、垂直配置: 中央。垂直方向の中央揃えと言えば、CSS に垂直方向の中央揃え用のプロパティvertical-align がありますが、このスタイルは親要素が td または th の場合にのみ有効です。したがって、再度 table タグを挿入する必要があります。例を見てみましょう:
html コード:
<body><table><tbody><tr><td class="wrap"><div> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p></div></td></tr></tbody></table></body>
table td{height:500px;background:#ccc}
垂直居中-父元素高度确定的多行文本（方法二）
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。
html代码：
<div class="container"> <div> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> </div></div>
css代码：
<style>.container{ height:300px; background:#ccc; display:table-cell;/*IE8以上及Chrome、Firefox*/ vertical-align:middle;/*IE8以上及Chrome、Firefox*/}</style>这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7。
隐性改变display类型
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
position : absolutefloat : left 或 float:right
元素会自动变为以 display:inline-block的方式显示，当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。
如下面的代码，小伙伴们都知道 a 标签是行内元素，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。
<div class="container"> <a href="#" title="">进入课程请单击这里</a></div>
css代码
<style>.container a{ position:absolute; width:200px; background:#ccc;}</style>
我的公众号二维码
ホット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）
ホットトピック
7324
9
1625
14
1350
46
1262
25
1209
29
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
Mar 04, 2025 pm 12:32 PM
公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
WebページのPNG画像にストローク効果を効率的に追加する方法は？
Mar 04, 2025 pm 02:39 PM
この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
HTML5＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？
Mar 12, 2025 pm 04:05 PM
この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします
＆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; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
