用CSS網(wǎng)頁制作時讓網(wǎng)頁內(nèi)容居中的方法

居中一直是設(shè)計師們比較喜歡使用的一種擺放形式，無論是圖片還是文字都會被要求放在中間，水平或者垂直。css提供了很多方便的讓內(nèi)容居中的方法給我們使用，以下羅列那些最長被使用的居中技巧。

水平居中的text-align:center 和 margin:0 auto

這兩種方法都是用來水平居中的，前者是針對父元素進(jìn)行設(shè)置而后者則是對子元素。他們起作用的首要條件是子元素必須沒有被float影響，否則一切都是無用功。margin:0 auto也可以被寫成margin:0 auto 0 auto。不能理解的童鞋們可以自己去找找關(guān)于css縮寫的內(nèi)容。

垂直居中的line-height

什么？！margin在垂直居中里不起作用了？顯然事情確實如此，我們僅有margin:0 auto的用法而沒有auto 0的情況。至于line-height，他也是作用在父元素上，當(dāng)他的值等于父元素的height值時，內(nèi)部的文字就會自動的垂直居中了。此處好像僅僅只能是文字而已。

萬能的position大法

這個方法可以說真的是萬能的。當(dāng)你為一個元素?zé)o法居中而困擾的時候，可以果斷的使用他，而且?guī)缀鯖]有后遺癥，絕對是前端工程師們居家旅行必備的手段之一。

具體的做法很簡單，首先給父元素寫上positon:relative，這么做是為了給子元素打上position:absolute的時候不會被定位到外太空去。接下去，寫上子元素的height和width，這個似乎是必須的，某些瀏覽器在解析的時候如果沒有這2個值的話會出現(xiàn)意想不到的錯位。接著就是整個方法的核心，給子元素再打上top:50%;left:50%以及margin-top:一半的height值的的負(fù)數(shù);margin- left:一半的weight值的負(fù)數(shù)。整理一下之后，可能你會給你的子元素寫上這樣的css（當(dāng)然，父元素也要先寫上width和height）{width:100px;height:80px;position:absolute;top:50%;left:50%;margin-left:50px;margin-top:40px} 接下去就刷新頁面吧，你的子元素已經(jīng)是居中顯示了。

使用這個方法的好處在于無論你是什么形式的內(nèi)容都可以馬上居中，而缺點就是必須對元素有確定的寬高值，否則的話可能就需要通過javascript來進(jìn)行一些小計算了。

分享文章：用CSS網(wǎng)頁制作時讓網(wǎng)頁內(nèi)容居中的方法
文章源于：http://www.muchs.cn/news22/53672.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、網(wǎng)站營銷、域名注冊、定制開發(fā)、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)