CSS: 水平方向のセンタリングと垂直方向のセンタリング_html/css_WEB-ITnose

CSS のセンタリングは比較的基本的な問題であり、実際のアプリケーションでは一般に 2 つの状況を考慮する必要があります。1 つは主にテキストや画像などのインライン要素のセンタリングで、もう 1 つはブロックのセンタリングです。 divs レベルのラベル要素のセンタリング。

水平方向の中央揃え

1. インライン要素

インライン要素 (主にテキスト、画像、その他のインライン要素として表されます) は、親要素に text-align:center を設定して、子のインライン要素を中央に配置します。

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

固定幅のブロックレベル要素に設定します:

1 margin-left:auto;2 margin-right:auto;

3. 可変幅のブロックレベル要素

有効幅のブロックレベルの要素を中央に配置するには 3 つの方法があります:

1. table タグを追加する
2. display:inline メソッドを設定する
3. position:relative と left:50% を設定する

方法 1:

table タグで要素を囲む、tbody、tr、td を含みますが、このメソッドはセンタリングのために非意味的なラベルを追加します。

-------------------------------------------- --- -----------栗をください---------------------------- --- -----------------------

HTML:

 1 <div> 2   <table> 3     <tbody> 4       <tr> 5         <td> 6            <ul> 7               <li><a href="#">我是要</a></li> 8               <li><a href="#">居中的</a></li> 9               <li><a href="#">ul标签</a></li>10            </ul>11         </td>12       </tr>13     </tbody>14   </table>15 </div>

CSS:

すごいです

最新のブラウザは正常に動作します:

IE7 には時々問題があります:

- ----------------- -------------------------------------------------------- ---栗を食べた後------ ----------------------------------- --------------- -

方法 2:

inline 要素を設定した後、inline 要素を中央揃えする方法が使用されます。要素の表示スタイル。

------------------------------------------ ----- -------------栗ちょうだい -------------------------------------- ------ ------------------------

HTML:

1 table{2     margin:0 auto;3 }4 ul{list-style:none;margin:0;padding:0;}5 li{float:left;margin-right:8px;}

CSS:

1 <div>2     <ul>3        <li><a href="#">我是要</a></li>4        <li><a href="#">居中的</a></li>5        <li><a href="#">ul标签</a></li>6   </ul>7 </div>

各ブラウザは正常に中央揃えで動作し、IE7 は問題ありません。

-------------------------------------- --- -----------栗を食べた後---------------------------- --- ------------------------

方法 3:

float/display:inline-block を次のように設定する親要素 (IE7 ペアのブロックレベル要素に対する inline-block の設定はサポートが不十分で、ハックが必要です。つまり、*display:inline;*zoom:1;)、親要素にposition:relativeおよびleft:50%を設定します。 、子要素にposition:relativeとleftを設定して、水平方向の中央揃えを実現します。

------------------------------------------ ----- -------------栗ちょうだい -------------------------------------- ------ ------------------------

HTML:

1 div{2   text-align:center;3 }4 ul{list-style:none;margin:0;padding:0;display:inline;}5 li{margin-right:8px;display:inline;}

CSS:

1 <div>2     <ul>3        <li><a href="#">我是要</a></li>4        <li><a href="#">居中的</a></li>5        <li><a href="#">ul标签</a></li>6     </ul>7 </div>

chrome、Firefox、opera、IE6+ はすべて正常に実行できます。

注:

1、_display:inline 其实是触发IE6中块级元素表现出 inline-block 的效果，_zoom:1 触发IE6中 hasLayout 效果，这里其他浏览器不需要触发 inline-block 效果，原因不是很清楚；

2、其中display：inline-block 也可以替换为 float ，float的主要作用就是产生 inline-block 的效果，这样代码会更加简洁一些，不用考虑太多的兼容问题：

CSS：

 1 div{ 2     float: left; 3     position:relative; 4     left:50% 5 } 6 ul{ 7     /*兼容IE6*/ 8     _float:left; 9     list-style:none;10     margin:0;11     padding:0; 12     position:relative;13     left:-50%;14 }15 li{16     float:left;17     margin-right:8px;18 }

---------------------------------------------------------吃完栗子---------------------------------------------------------

垂直居中

垂直居中主要是行内元素的居中比较麻烦，特别是多行文本的居中。

1、父元素高度确定的 行内元素（单行文本），

通过设置父元素的 height 和 line-height 高度一致来实现的。

2、高度固定的 块级元素垂直居中

高度固定的 块级元素垂直居中有三种方法：

1. 垂直居中元素设置 absolute，利用 absolute 元素居中的方法来居中；
2. 垂直居中元素设置 absolute，通过 top 和 margin-top 属性来调整；
3. 创建浮动元素；

方法一：

其实这个方法是 absolute 元素居中的方法，父元素设置 position:relative，垂直居中元素设置 position:absolute，当要垂直居中时，设置 top:0;bottom:0，然后为上下 margin 设置 auto，水平居中也是同理。IE6，IE7不支持此种居中方法。

这种方法适用于原本就设置了 position 为 absolute 的元素。

---------------------------------------------------------举个栗子---------------------------------------------------------

HTML：

1 <div class="wrap">2   <div class="container">3      <p>我是想要垂直居中的块级元素。</p>4   </div>5 </div>

CSS：

 1 .wrap{ 2     width:200px; 3     height: 200px; 4     background:#ccc; 5     position: relative; 6 } 7 .container{ 8     width: 100px; 9     height:100px;10     background: #00ff00;11     position:absolute; 12     right: 0;13     left:0;14     top:0; 15     bottom:0; 16     margin:auto; 17 }

chrome，Firefox，opera，IE8+表现如下，水平垂直居中：

---------------------------------------------------------吃完栗子---------------------------------------------------------

方法二：

父元素设置 position:relative，需要垂直居中的元素设置：

1 position:absolute;2 top:50%;3 height:2Hpx;4 margin-top:Hpx;

这里 top改为 bottom，margin-top 改为 margin-bottom 效果一样，这种方法适用于原本设置了 position 为 absolute 的元素。

---------------------------------------------------------举个栗子---------------------------------------------------------

HTML：

1 <div class="wrap">2   <div class="container">3      <p>我是想要垂直居中的块级元素。</p>4   </div>5 </div>

CSS：

 1 .wrap{ 2   width:100px; 3   height: 200px; 4   background:#ccc; 5   position: relative; 6 } 7 .container{ 8     position:absolute;  9     top:50%; 10     height:100px; 11     margin-top:-50px; /* 高度的一半 */ 12     background: #00ff00;13 }

chrome，Firefox，opera，IE6+都能够居中：

IE6 由于 3px bug表现稍微不同，不过由于这里主要讨论垂直居中，所以就不对其作过多留意。

---------------------------------------------------------吃完栗子---------------------------------------------------------

方法三：

在需要垂直居中的元素前创建浮动元素，浮动元素设置 margin-bottom 为垂直居中元素高度的一半，高度为父元素高度的一半，为了兼容IE6、IE7，还需要象征性地设置一下 width。垂直居中元素 清除浮动。但是这个方法创建了无语义的标签，还要做一些兼容性的处理。

---------------------------------------------------------举个栗子---------------------------------------------------------

HTML：

1 <div class="wrap">2     <div class="floatdiv"></div>  3     <div class="container">4         <p>我是想要垂直居中的块级元素。</p>5     </div>6 </div>

CSS：

 1 .wrap{ 2     width: 100px; 3     height: 200px; 4     background: #ccc; 5 } 6 .floatdiv { 7     *width: 1px;/*兼容IE6、IE7*/ 8     float:left;  9     height:50%; 10     margin-bottom:-50px;11 }12 .container {13     clear:both; 14     height:100px; 15     position:relative;16     background: #00ff00;17 }

chrome，Firefox，opera，IE6+都能够居中：

---------------------------------------------------------吃完栗子---------------------------------------------------------

3、父元素高度确定的 行内元素（ 多行文本、图片）、块状元素

父元素高度确定的 行内元素（ 多行文本、图片）、块状元素垂直居中有两种方法 ：

1. 加入table标签；
2. 设置 display 为 table-cell，激活 vertical-align 属性。

方法一：

使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。

---------------------------------------------------------举个栗子---------------------------------------------------------

HTML：

 1 <table> 2   <tbody> 3     <tr> 4       <td class="wrap"> 5         <div> 6           <p>我是想要垂直居中的一段文字。</p> 7         </div> 8       </td> 9     </tr>10   </tbody>11 </table>

CSS：

1 .wrap{2    width:100px;3    height:200px;4    background:#ccc5 }

chrome，Firefox，opera，IE6+表现如下：

注：

1、因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了；

2、将 div 换为 img 效果一致。

---------------------------------------------------------吃完栗子---------------------------------------------------------

方法二：

在 chrome、Firefox 、opera、IE8 及以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。

---------------------------------------------------------举个栗子---------------------------------------------------------

HTML：

1 <div>2   <p>我是想要垂直居中的一段文字。</p>3 </div>

CSS：

1 div{2   width:100px;3   height:200px;4   background:#ccc;5   display:table-cell;6   vertical-align:middle;7 }

chrome、Firefox 、opera、IE8 及以上的浏览器表现正常，IE6 和 IE7 则无法居中。

---------------------------------------------------------吃完栗子---------------------------------------------------------

垂直居中的方法比较多，至于用哪种方法还是要具体看情况，而且我相信还有更多的方法，欢迎大家补充。

 

 水平有限，错误欢迎指正。原创博文，转载请注明出处。