在css的使用中，有很多小技巧，今天就談一談css使用中的文本設(shè)置。

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供橋西網(wǎng)站建設(shè)、橋西做網(wǎng)站、橋西網(wǎng)站設(shè)計、橋西網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、橋西企業(yè)網(wǎng)站模板建站服務(wù)，十載橋西做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

 在很多時候，我們都會用到文本的水平居中設(shè)置，例如文章的標(biāo)題，為了顯得好看，我們一般設(shè)置的就是水平居中。不同的html元素設(shè)置水平居中的方法不同。

 1.行內(nèi)元素

 對于行內(nèi)元素，設(shè)置水平居中，如果被設(shè)置元素為文本、圖片等元素，只需要在父元素中設(shè)置text-align:center即可。

 2.塊狀元素

 對于塊狀元素，text-align:center是不起作用的，那么我們該如何設(shè)置呢，這里分兩種情況：

 1）定寬的塊狀元素

 設(shè)置左右margin(外邊距)值為auto。例如：margin:10px auto。當(dāng)然前提是元素的寬度是確定的，即width有確定的值，例如：width:200px。

 2）不定寬的塊狀元素

 對于不定寬的塊狀元素，設(shè)置水平居中的方式有三種：

 a.加入table標(biāo)簽

 為什么要加入table標(biāo)簽?zāi)?，原來table標(biāo)簽有一個特性-----自適應(yīng)長度，不定義其長度也不默認(rèn)body的長度(table的長度是根據(jù)其內(nèi)容的長度來定的)。可以看作一個定寬的塊狀元素，利用margin左右設(shè)置auto的方法實現(xiàn)水平居中。

 b.設(shè)置display:inline

 通過設(shè)置display:inline，使元素變成行內(nèi)元素，進(jìn)行不定寬元素的屬性設(shè)置。

 c.設(shè)置position屬性為relative，left為50%

 通過給父元素設(shè)置float:left，position:reletive,left:50%。給子元素設(shè)置position:reletive,left:-50%來實現(xiàn)水平居中的。通過設(shè)置父元素的相關(guān)屬性，使父元素的左邊緣與body的中線對齊，再設(shè)置子元素的相關(guān)屬性，使子元素的中線與父元素的左邊緣重合，從而完成水平居中設(shè)置。

---

 有時候為了使用戶的體驗性好，我們需要給元素設(shè)置垂直居中。設(shè)置垂直居中，分兩種情況：

 1）父元素高度確定的單行文本

 通過設(shè)置父元素高度height和line-height一致達(dá)到垂直居中的目的。其中，line-height指的是文本中行與行之間的基線距離。line-height與font-size之間的差分為兩半，分別加入到一個文本內(nèi)容的頂部和底部。這種文字行高與塊高一致帶來了一個弊端：當(dāng)文字內(nèi)容的長度大于塊的寬時，就有內(nèi)容脫離了塊。

 2）父元素高度確定的多行文本

 對于父元素高度確定的多行文本，有兩種方法可以實現(xiàn)垂直居中：

 a.使用插入table(包括tbody、tr、td)標(biāo)簽，同時設(shè)置vertical-align:middle

 css中有一個用于豎直居中的屬性vertical-align在父元素設(shè)置此樣式時，會對inline-block類型的子元素都有用。td標(biāo)簽?zāi)J(rèn)情況下就默認(rèn)設(shè)置了vertical-align為middle。

 b.設(shè)置塊級元素的display屬性為table-cell(設(shè)置為表格單元顯示)，激活vertical-align屬性

 此方法的好處是不用添加多余的無意義的標(biāo)簽，但缺點也很明顯，它的兼容性不是很好，不兼容IE6、7，而且這樣修改display的block變成了table-cell，破壞了原有的塊狀元素的性質(zhì)。

---

 此外，有一個有趣的現(xiàn)象：當(dāng)設(shè)置元素的float屬性為left或right，或者是設(shè)置元素的position屬性為absolute時，元素自動轉(zhuǎn)換為塊級元素(display:inline-block)，不論之前是什么元素。此時就可以設(shè)置元素的寬度和高度了。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁標(biāo)題：CSS使用技巧(一)-創(chuàng)新互聯(lián)
當(dāng)前鏈接：http://weahome.cn/article/dedsjh.html