<style>.container{ height:100px; line-height:100px; background:#999;}</style>
【CSS3】-スタイルのヒント_html/css_WEB-ITnose
水平方向の中央の設定 - 固定幅のブロック要素
設定された要素がブロック要素の場合、text-align: center の使用は機能しません。 この場合、次の 2 つの状況があります: 固定幅 ブロック形状。要素と 無限幅ブロック要素。このセクションでは、まず固定幅のブロック要素について説明します。
固定幅とブロックの2つの条件を満たす要素は、「左右の余白」の値を「自動」に設定することで中央揃えにすることができます。 div ブロック要素を水平方向に中央揃えに設定する例を見てみましょう:
html コード:
<body> <div>我是定宽块状元素，哈哈，我要水平居中显示。</div></body>
css コード:
<style>div{ border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:500px;/*定宽*/ margin:20px auto;/* margin-left 与 margin-right 设置为 auto */}</style>
は次のように書くこともできます:
margin-left:auto;margin-right:auto;
注意:要素「上下マージン」を任意に設定できます。
水平方向のセンタリングのまとめ - 幅可変のブロック要素の方法(1)
実際の作業では、Webページのページングナビゲーションなど、「幅が可変のブロック要素」に対してセンタリングを設定する必要が出てきます。ページングの量は定義されていないため、幅を設定して弾力性を制限することはできません。
可変幅のブロック要素を中央に配置するには 3 つの方法があります (現在、これら 3 つの方法がより頻繁に使用されます):
- テーブルタグを追加する
- 表示を設定する;インラインメソッド
- 位置:相対と左:50% を設定する;
このセクションでは、最初の方法について説明します:
ステップ 1: 設定する必要がある中央の要素の外側に table タグ (
、ステップ 2: このテーブルの「左右のマージンを中央に設定」します (これは固定幅ブロック要素と同じ方法です)。 Examplesは次のとおりです：
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>
html コード:
<style>table{ margin:0 auto;}ul{list-style:none;margin:0;padding:0;}li{float:left;display:inline;margin-right:8px;}</style>css コード:
<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>
最初の方法と比較したこの方法の利点は、非セマンティックなタグを追加する必要がなく、タグのネストの深さが簡素化されることです。ただし、いくつかの問題もあります。ブロック要素の表示タイプがインラインに変更され、インライン要素に変換されるため、長さの値の設定などの一部の機能が失われます。
水平センタリングのまとめ - 幅可変ブロック要素のやり方(3)
親要素にfloatを設定し、親要素にposition:relativeとleft:50%を設定し、position:relativeとleftを設定することで、 - 子要素の 50% が水平方向の中央揃えを実現します。
コードは次のとおりです:
<style>.container{ text-align:center;}.container ul{ list-style:none; margin:0; padding:0; display:inline;}.container li{ margin-right:8px; display:inline;}</style>css コード:
<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>
このメソッドの利点は、ブロック要素を保持しつつ、display:block の形式で表示できることです。が追加され、ネストの深さは増加しませんが、その欠点は、position:relative が設定されているため、特定の副作用が生じることです。
垂直方向のセンタリング - 親要素の高さが決定された単一行のテキスト
親要素の高さが決定された単一行のテキスト
垂直方向のセンタリング方法は、高さと行を設定することで実現されます。親要素の高さを一定にする必要があります。次のコード:
<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>css コード:
<div class="container"> hi,imooc!</div>
垂直方向中央揃え - 親要素高さを決定する 複数行テキスト (方法 1)
高さ親要素 複数行のテキスト、画像、およびブロック要素の垂直方向の中央揃えを決定するには 2 つの方法があります: 方法 1: insert table (tbody、tr、td を含む) タグを使用し、vertical-align: middle を設定します。 垂直方向のセンタリングといえば、CSSに垂直方向のセンタリング用のプロパティvertical-alignがありますが、このスタイルは親要素がtdまたはthの場合にのみ有効になります。したがって、再度 table タグを挿入する必要があります。以下の例を見てください: html コード: <style>.container{ height:100px; line-height:100px; background:#999;}</style>ログイン後にコピー
<style>.container{ height:100px; line-height:100px; background:#999;}</style>css コード:
<body><table><tbody><tr><td class="wrap"><div> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p></div></td></tr></tbody></table></body>
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
垂直居中-父元素高度确定的多行文本（方法二）
在 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 : absolute
- float : 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）
ホットトピック
7474
15
1377
52
77
11
19
31
＆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＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？
Mar 12, 2025 pm 04:05 PM
この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします
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などの代替案に埋め込む際のタグの目的。
