廊坊網(wǎng)站建設(shè)：利用CSS控制文字與圖片水平居中的方法

DIV+CSS程序現(xiàn)在被更多的網(wǎng)站所使用，它不僅簡便，而且大大提升了網(wǎng)站的速度，其實最主要的是使用它可以減少更多的工作時間。今天，小編要與大家分享下，如何利用CSS控制文字與圖片水平居中的方法，希望大家在下面的內(nèi)容中認真的學(xué)習(xí)下。

在我們開發(fā)網(wǎng)站的時候，關(guān)于css居中的問題是很常見的，一般來說情況有很多，不同的情況又有不同的解決方式，水平居中的方式解決的時候相對來說通過css比較容易設(shè)置。小編工作的時候一般會使用三種方式來處理：

1、使用table作為容器的方法來實現(xiàn)，當(dāng)然我們還是不大推薦使用這種方法，因為添加了沒有意義的標(biāo)簽，Table標(biāo)簽本身并不是塊級元素，當(dāng)我們不設(shè)置table的寬度的話，他里面的寬度是由他內(nèi)部元素的寬度撐起來的。但即使我們沒有設(shè)置table的寬度，直接設(shè)置table的外邊距margin：0 auto;就可以實現(xiàn)水平居中了。

2、相對于用table的方法的好處是不用增加無語義標(biāo)簽，簡化標(biāo)簽嵌套深度。這個思路是這樣的，通過改變塊級元素的display屬性值為inline類型，然后設(shè)置text-align:center來實現(xiàn)居中。這種方法也有一定不妥之處就是把塊級元素改為行內(nèi)元素后，行內(nèi)元素比塊元素少了一些功能。比如說設(shè)定長寬值等，在項目運用中可能會有一些限制，大家可以自行選擇。

3、還通過給父元素設(shè)置浮動float，再設(shè)置父元素的position屬性為relative和left：50%;子元素設(shè)置position：relative和left：-50%來實現(xiàn)水平居中。這個好處是可以保留塊級元素仍然是以display：block的形式顯示，不會添加無意義的標(biāo)簽，不添加嵌套深度。確點是設(shè)置了position：relative;帶來了一些副作用。下面是第三種方法的實例代碼，放到body標(biāo)簽里面就可以了。

以上的三種方法都可以解決文字圖片水平居中的問題，大家看后如果覺得還有更好的辦法，可以拿出來一起分享下。