如何設定水平置中?
分兩種情況 行內元素與區塊層級元素
1.行內元素(片 文字)
div.textcenter{ text-align:center; } <div class="textcenter">hello joe!</div>
2.區塊層級元素
區塊層級元素的水平置中又分為兩種 定寬塊狀元素 和 非定寬塊狀元素
定寬塊狀元素(即塊狀元素的width值是定值):
可以通過區塊層級元素的左右margin為auto來實現中 如下
div{ border:1px solid red; width:500px;/*定寬*/ margin:30px auto;/*margin-right margin-left為auto*/ } <div>I am middle placed.</div>
不定寬塊狀元素(即寬度width不確定 比如網頁上的分頁導航)
對於不定寬元素實現水平置中有三種方法(常用):
第一種方法:利用table標籤
利用table標籤的長度自適應性---即不定義其長度也不預設父元素body的長度(table其長度根據其 內文本長度決定),因此可以看做一個定寬度塊元素,然後再利用定寬度塊狀置中的margin的方 法,使其水平置中
第一步:為需要設定的置中的元素外面加入一個 table 標籤 ( 包括 <tbody>、<tr>、<td> )。
第二步:為這個 table 設定“左右 margin 置中”(這個和定寬塊狀元素的方法一樣)。
table{ margin: 0 auto; } ul{list-style:none;/*將小圓點去掉*/} li{float:left;display:inline;margin-right:5px;} <table> <tbody> <tr> <td> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <ul> </td></tr> </tbody> </table>
第二種方法:改變區塊層級元素的 display 為 inline 類型(設定為 行內元素 顯示),然後使用 text-align:center 來實現置中效果。如下例子:
.container{ text-align:center; } .container ul{ display:inine; list-style:none; padding:0; margin:0; } .container li{ display:inline; margin-right:8px; }
與第一種方法相比不用添加無語義標籤(table)但是由於li被視作行內元素,所以無法為其設定height,width等屬性
第三種方法:通過給父元素設定 float,然後給父元素設定 position:relative 和 left:50%,子項目設定 position:relative 和 left: -50% 來實現水平置中。
.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; } <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul> </div>
2.如何設定垂直置中?
分為兩種情況,父元素高度確定的單行文本,父元素高度確定的多行文本。
單行文本:通過設定line-height 與 height一致實現垂直置中
line-height 與 font-size 的計算值之差,在 CSS 中成為“行間距”。分為兩半,分別加到一個文本行內容的頂部和底部。
這種文字行高與塊高一致帶來了一個弊端:當文字內容的長度大於塊的寬時,就有內容脫離了塊。
.container{ line-height:100px; height:100px; background:purple;}<div class="container"><h1>Hello World!</div>
但是該方法有一個弊端:當文字的長度長於塊的寬度的時候,內容就脫離了塊。
多行文本:
有兩種方法:
使用table標籤 使用vertical-align:middle(注意td標籤預設就設定了vertical-align:middle
所以不需要我們手動設定。
table td{height:500px;background:#purple;}<table> <tbody> <tr><td> <div> I am centered<br> I am centered<br> I am centered<br> I am centered<br> I am centered<br> </div> </tr></tr> </tbody></table>
最後一個技巧
隱式的改變display的屬性 當為元素設定以下兩個語句之一的話:
float:right 或者float:right
position:absolute
元素的display類型就會自動變為display:inline-block 此時就可以設定元素的寬和高了例如
<style type="text/css">.container a{ position:absolute; width:100px; height:50px; background:purple;}</style><body> <div class="container"> <a href="#"> I am CEO,you son of bitch. </a> </div></body>