CSS使用技巧(一)

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

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

  1.行內元素

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

  2.塊狀元素

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

  1）定寬的塊狀元素

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

  2）不定寬的塊狀元素

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

  a.加入table標簽

  為什么要加入table標簽呢，原來table標簽有一個特性-----自適應長度，不定義其長度也不默認body的長度(table的長度是根據其內容的長度來定的)。可以看作一個定寬的塊狀元素，利用margin左右設置auto的方法實現水平居中。

  b.設置display:inline

  通過設置display:inline，使元素變成行內元素，進行不定寬元素的屬性設置。

  c.設置position屬性為relative，left為50%

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

<hr/>

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

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

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

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

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

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

  css中有一個用于豎直居中的屬性vertical-align在父元素設置此樣式時，會對inline-block類型的子元素都有用。td標簽默認情況下就默認設置了vertical-align為middle。

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

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

<hr/>

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