從零開始學習html（十五）css樣式設置小技巧——上

一、水平居中設置-行內元素 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>定寬塊狀元素水平居中</title> 6 <style> 7 div{ 8 border:1px solid red; 9 marg ...

一、水平居中設置-行內元素

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>定寬塊狀元素水平居中</title>
 6 <style>
 7 div{
 8     border:1px solid red;
 9     margin:20px;
10 }
11 .txtCenter{
12     text-align:center;
13 }
14 
15 </style>
16 </head>
17 
18 <body>
19 <div class="txtCenter">我想要在父容器中水平居中顯示。</div>
20 
21 <!--下麵是任務部分-->
22 
23 <div class="imgCenter"><img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" /></div>
24 </body>
25 </html>

水平居中設置-行內元素

我們在實際工作中常會遇到需要設置水平居中的場景，比如為了美觀，文章的標題一般都是水平居中顯示的。

這裡我們又得分兩種情況：行內元素還是塊狀元素，塊狀元素裡面又分為定寬塊狀元素，以及不定寬塊狀元素。

我們先來瞭解一下行內元素怎麼進行水平居中？

如果被設置元素為文本、圖片等行內元素時，水平居中是通過給父元素設置 text-align:center 來實現的。

(父元素和子元素：如下麵的html代碼中，div是“我想要在父容器中水平居中顯示”這個文本的父元素。反之這個文本是div的子元素 )如下代碼：

html代碼：

<body>
  <div class="txtCenter">我想要在父容器中水平居中顯示。</div>
</body>

css代碼：

<style>
  .txtCenter{
    text-align:center;
  }
</style>

任務

來試試：把圖片設置為水平居中顯示。

參考代碼：

div.imgCenter{

text-align:center;

}

二、水平居中設置-定寬塊狀元素

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>定寬塊狀元素水平居中</title>
 6 <style>
 7 div{
 8     border:1px solid red;
 9     
10     width:200px;
11     margin:20px auto;
12 }
13 
14 </style>
15 </head>
16 
17 <body>
18 <div>我是定寬塊狀元素，我要水平居中顯示。</div>
19 </body>
20 </html>

水平居中設置-定寬塊狀元素

當被設置元素為塊狀元素時用 text-align：center 就不起作用了，這時也分兩種情況：定寬塊狀元素和不定寬塊狀元素。

這一小節我們先來講一講定寬塊狀元素。(定寬塊狀元素：塊狀元素的寬度width為固定值。)

滿足定寬和塊狀兩個條件的元素是可以通過設置“左右margin”值為“auto”來實現居中的。我們來看個例子就是設置 div 這個塊狀元素水平居中：

html代碼：

<body>
  <div>我是定寬塊狀元素，哈哈，我要水平居中顯示。</div>
</body>

css代碼：

<style>
div{
    border:1px solid red;/*為了顯示居中效果明顯為 div 設置了邊框*/
    
    width:200px;/*定寬*/
    margin:20px auto;/* margin-left 與 margin-right 設置為 auto */
}

</style>

也可以寫成：

margin-left:auto;
margin-right:auto;

註意：元素的“上下 margin” 是可以隨意設置的。

任務

試試看:這種水平居中的方法兩個2個條件缺一不可，不信？

你可以嘗試把例子中的 width:200px 刪除，還它是否還可以居中顯示。

因為DIV塊元素本身就沒有寬度，高度，它是個容器，可以無限放大，無限縮小。因為，如果沒有寬度，那麼居中就沒有任何意義樓。水平居中分為：塊狀元素和行內元素居中兩種，行內元素用text-align:center;塊狀元素用:margin:0 auto;

三、水平居中總結-不定寬塊狀元素方法（一）

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>不定寬塊狀元素水平居中</title>
 6 <style>
 7 table{
 8     margin:0 auto;
 9 }
10 
11 /*下麵是任務區代碼*/
12 .wrap{
13     background:#ccc;
14 }
15 </style>
16 </head>
17 
18 <body>
19 <div>
20 <table>
21   <tbody>
22     <tr><td>
23     <ul>
24         <li>我是第一行文本</li>
25         <li>我是第二行文本</li>
26         <li>我是第三行文本</li>
27     </ul>
28     </td></tr>
29   </tbody>
30 </table>
31 </div>
32 
33 <div class="wrap">
34   設置我所在的div容器水平居中  
35 </div>
36 </body>
37 </html>

水平居中總結-不定寬塊狀元素方法（一）

在實際工作中我們會遇到需要為“不定寬度的塊狀元素”設置居中，比如網頁上的分頁導航，因為分頁的數量是不確定的，

所以我們不能通過設置寬度來限制它的彈性。(不定寬塊狀元素：塊狀元素的寬度width不固定。)

不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都很多）：

加入 table 標簽
設置 display: inline 方法：與第一種類似，顯示類型設為行內元素，進行不定寬元素的屬性設置
設置 position:relative 和 left:50%：利用相對定位的方式，將元素向左偏移 50% ，即達到居中的目的

我們來講一下第一種方法：

為什麼選擇方法一加入table標簽? 是利用table標簽的長度自適應性---即不定義其長度也不預設父元素body的長度（table其長度根據其內文本長度決定），

因此可以看做一個定寬度塊元素，然後再利用定寬度塊狀居中的margin的方法，使其水平居中。

第一步：為需要設置的居中的元素外面加入一個 table 標簽 ( 包括 <tbody>、<tr>、<td> )。

第二步：為這個 table 設置“左右 margin 居中”（這個和定寬塊狀元素的方法一樣）。

舉例如下：

html代碼：

<div>
 <table>
  <tbody>
    <tr><td>
    <ul>
        <li>我是第一行文本</li>
        <li>我是第二行文本</li>
        <li>我是第三行文本</li>
    </ul>
    </td></tr>
  </tbody>
 </table>
</div>

css代碼：

<style>
table{
    border:1px solid;
    margin:0 auto;
}
</style>

任務

來試試：補充代碼實現右側中的 class 為 wrap 的 div 水平居中顯示（要註意是這個 div元素居中，而不是裡面的文本居中啊）。

四、水平居中總結-不定寬塊狀元素方法（二）

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>不定寬塊狀元素水平居中</title>
 6 <style>
 7 .container{text-align:center;}
 8 .container ul{list-style:none;margin:0;padding:0;display:inline;}
 9 .container li{margin-right:8px;display:inline;}
10 </style>
11 </head>
12 
13 <body>
14 <div class="container">
15     <ul>
16         <li><a href="#">1</a></li>
17         <li><a href="#">2</a></li>
18         <li><a href="#">3</a></li>
19     </ul>
20 </div>
21 </body>
22 </html>

水平居中總結-不定寬塊狀元素方法（二）

除了上一節講到的插入table標簽，可以使不定寬塊狀元素水平居中之外，第2種實現這種效果的方法，改變元素的display類型為行內元素，利用其屬性直接設置。

第二種方法：改變塊級元素的 display 為 inline 類型（設置為行內元素顯示），然後使用 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>

css代碼：

<style>
.container{
    text-align:center;
}
/* margin:0;padding:0（消除文本與div邊框之間的間隙）*/
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}
/* margin-right:8px（設置li文本之間的間隔）*/
.container li{
    margin-right:8px;
    display:inline;
}
</style>

這種方法相比第一種方法的優勢是不用增加無語義標簽，但也存在著一些問題：它將塊狀元素的 display 類型改為 inline，變成了行內元素，所以少了一些功能，比如設定長度值。

五、水平居中總結-不定寬塊狀元素方法（三）

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>不定寬塊狀元素水平居中</title>
 6 <style>
 7 .container{
 8     float:left;
 9     position:relative;
10     left:50%
11 }
12 
13 .container ul{
14     list-style:none;
15     margin:0;
16     padding:0;
17     
18     position:relative;
19     left:-50%;
20 }
21 .container li{float:left;display:inline;margin-right:8px;}
22 
23 
24 /*下麵是代碼任務區*/
25 
26 .wrap-center{
27     background:#ccc;
28     
29     
30 }
31 </style>
32 </head>
33 
34 <body>
35 <div class="container">
36     <ul>
37         <li><a href="#">1</a></li>
38         <li><a href="#">2</a></li>
39         <li><a href="#">3</a></li>
40     </ul>
41 </div>
42 
43 <!--下麵是代碼任務區-->
44 <div class="wrap">
45     <div class="wrap-center">我們來學習一下這種方法。</div>
46 </div>
47 </body>
48 </html>

水平居中總結-不定寬塊狀元素方法（三）

除了前兩節講到的插入table標簽，以及改變元素的display類型，可以使不定寬塊狀元素水平居中之外，第3種實現這種效果的方法，設置浮動和相對定位來實現。

方法三：通過給父元素設置 float，然後給父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left: -50% 來實現水平居中。

我們可以這樣理解：假想ul層的父層（即下麵例子中的div層）中間有條平分線將ul層的父層（div層）平均分為兩份，

ul層的css代碼是將ul層的最左端與ul層的父層（div層）的平分線對齊；

而li層的css代碼則是將li層的平分線與ul層的最左端（也是div層的平分線）對齊，從而實現li層的居中。

代碼如下：

<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>

css代碼：

<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>

這三種方法使用得都非常廣泛，各有優缺點，具體選用哪種方法，可以視具體情況而定。

任務

來試試：添加代碼為任務區中的 class 為 wrap-center 的div設置水平居中。

這裡面很重要的一個點就是父元素設置了float，float中有一個很重要的特性——“設置了float的元素，會生成塊級框”；步驟如下：
1. 父元素position: relative; left: 50%;——父元素的左邊線與屏幕的中心線對齊
2. 父元素float——使得父元素生成了塊級框，也就是使得父元素的寬度 = 子元素的寬度，如果沒有float，則父元素的寬度還是屏幕的寬度
3. ·子元素position:relative; left:-50%；註意：left是相對於父元素的寬度進行偏移的，而此時父元素的寬度=子元素的寬度；實現居中

/*text-align:center(文本居中)*/
/*list-style:none(消除li圓點) margin:0;padding:0（消除文本與div邊框之間的間隙） display:inline（變成行內元素，也就是把ul文本列變成行。另外從border來看未設置inline之前寬度是無限的，設置後寬度變為隨文本寬度）*/
/*margin-right:8px（設置li文本之間的間隔） display:inline（變成行內元素，也就是把li文本列變成行*/
沒看懂