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

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

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

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

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

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

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