実際の作業では、水平方向のセンタリングを設定する必要がある場面によく遭遇します。今日は水平方向のセンタリングを設定する方法を見ていきます。
設定する要素がテキストやピクチャなどのインライン要素の場合、親要素に 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;
水平方向のセンタリングのまとめ - 幅可変ブロック要素の方法
可変幅のブロック要素を中央に配置するには 3 つの方法があります (現在、これら 3 つの方法がより頻繁に使用されます)。
1. テーブル タグを追加します。 2. インライン メソッドを設定します。 3. 位置を設定します。 :relative and left:50%;
1. table タグを追加します
ステップ 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. インライン メソッド
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% を設定します。
コードは次のとおりです:
<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: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>
我的公众号二维码
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
