標籤：css 入門 前端
如何設定水平置中？
分兩種情況 行內元素與區塊層級元素
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>
650) this.width=650;" src="http://s2.51cto.com/wyfs02/M02/87/DA/wKiom1fjPy2y_nZ-AAAOynYLvHw252.jpg-wh_500x0-wm_3-wmp_4-s_2341619732.jpg" title="1.jpg" alt="wKiom1fjPy2y_nZ-AAAOynYLvHw252.jpg-wh_50" />
但是該方法有一個弊端：當文字的長度長於塊的寬度的時候，內容就脫離了塊。
多行文本：
有兩種方法：
使用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>
650) this.width=650;" src="http://s5.51cto.com/wyfs02/M02/87/DF/wKiom1fjhxehqD_AAAAeiS1ci90319.jpg-wh_500x0-wm_3-wmp_4-s_3635760566.jpg" title="1.jpg" alt="wKiom1fjhxehqD_AAAAeiS1ci90319.jpg-wh_50" />
====================================================================================
最後一個技巧
隱式的改變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>
650) this.width=650;" src="http://s3.51cto.com/wyfs02/M00/87/DB/wKioL1fjidngQRZtAAANc8yotcQ305.jpg-wh_500x0-wm_3-wmp_4-s_1396679182.jpg" title="2.jpg" alt="wKioL1fjidngQRZtAAANc8yotcQ305.jpg-wh_50" />
本文出自 “厚積薄發” 部落格，請務必保留此出處http://joedlut.blog.51cto.com/6570198/1855445
CSS進階之CSS的一些小技巧
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
