DIV+CSS程序現(xiàn)在被更多的網(wǎng)站所使用,它不僅簡便,而且大大提升了網(wǎng)站的速度,其實最主要的是使用它可以減少更多的工作時間。今天,小編要與大家分享下,如何利用CSS控制文字與圖片水平居中的方法,希望大家在下面的內(nèi)容中認真的學習下。
在我們開發(fā)網(wǎng)站的時候,關(guān)于css居中的問題是很常見的,一般來說情況有很多,不同的情況又有不同的解決方式,水平居中的方式解決的時候相對來說通過css比較容易設(shè)置。小編工作的時候一般會使用三種方式來處理:
1、使用table作為容器的方法來實現(xiàn),當然我們還是不大推薦使用這種方法,因為添加了沒有意義的標簽,Table標簽本身并不是塊級元素,當我們不設(shè)置table的寬度的話,他里面的寬度是由他內(nèi)部元素的寬度撐起來的。但即使我們沒有設(shè)置table的寬度,直接設(shè)置table的外邊距margin:0 auto;就可以實現(xiàn)水平居中了。
2、相對于用table的方法的好處是不用增加無語義標簽,簡化標簽嵌套深度。這個思路是這樣的,通過改變塊級元素的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的形式顯示,不會添加無意義的標簽,不添加嵌套深度。確點是設(shè)置了position:relative;帶來了一些副作用。下面是第三種方法的實例代碼,放到body標簽里面就可以了。
以上的三種方法都可以解決文字圖片水平居中的問題,大家看后如果覺得還有更好的辦法,可以拿出來一起分享下。