域名注冊 網(wǎng)站制作
您現(xiàn)在的位置:首頁 >> 網(wǎng)站建設(shè) >> 內(nèi)容

用CSS讓元素垂直居中的方法

時間:2015/3/18 15:31:15 點擊:246

摘要:[size=3]利用CSS讓元素垂直居中是個很頭疼的問題,這里就介紹兩種簡單實用的方法 [/size] [size=4]方法一:利用行高(line-height)定位[/size] line-height通常是用于調(diào)節(jié)一段文字的行與行之間的距離...

[size=3]利用CSS讓元素垂直居中是個很頭疼的問題,這里就介紹兩種簡單實用的方法

[/size]

[size=4]方法一:利用行高(line-height)定位[/size]

line-height通常是用于調(diào)節(jié)一段文字的行與行之間的距離,或者說兩行文字之間的距離,如果行高是500px,那么每一行中的文字距離本行的頂部就是250px,如果將文字的行高設(shè)為500px,并且外面的容器的高度也為500px,同樣可以實現(xiàn)垂直居中,但是用它來實現(xiàn)垂直居中,也是有缺點的,就是如果內(nèi)容過多,文字就會跑到下一行,那么內(nèi)容就不可能垂直居中了。

HTML代碼:

<h1>Hi, I'm<span>Vertically Aligned</span> Within the H1</h1>

CSS代碼:

body {

margin: 0;

padding: 0;

background: #1d1d1d;

font-size: 10px;

font-family: Verdana, Arial, Helvetica, sans-serif;

}

h1 {

font: 3em Georgia, "Times New Roman", Times, serif;

color: #fff;

height: 500px;

line-height: 500px;

text-align:center;

border: 10px solid #999;

}

h1 span {

font-weight: bold;

font-size:1.5em;

color: #fff000;

}

p {

font-size: 1.3em;

color: #999;

}

strong {

color: #fff;

}

[size=4]方法二:利用絕對定位

[/size]

先來看看效果,查看演示

這個方法有個缺點我必須指出,就是外面的塊狀元素,必須指定高度,所以如果你在里面放動態(tài)的內(nèi)容的話,后果會很糟糕滴~

HTML代碼:

<div class="vert">

<h1>Hi, I'm<span>Vertically Aligned</span></h1>

<p>Abigo sudo mara paulatim odio, accumsan luptatum nibh nibh refero metuo opes ut fatua. Acsi et fere similis <strong>Using</strong> augue <strong>absolute</strong> validus. Regula <strong>positioning</strong> eu jus vel, indoles fere iaceo ea similis. Velit praemitto nulla vel luctus secundum. </p>

</div>

CSS代碼:

這種用絕對定位來實現(xiàn)的垂直居中,取決與元素的寬度和高度,你可以用下面這兩個公式來計算元素的左邊距和上邊距

元素的寬度/2 = 負左邊距

元素的高度/2 = 負上邊距

在這個例子中,我們就是這么計算的

.vert {

width: 580px;

height: 190px;

position: absolute;

top: 50%;

left: 50%;

margin: -95px 0 0 -290px;

}

完整CSS代碼

body {

margin: 0;

padding: 0;

background: #1d1d1d;

font-size: 10px;

font-family: Verdana, Arial, Helvetica, sans-serif;

}

h1 {

font: 4em Georgia, "Times New Roman", Times, serif;

color: #fff;

border-bottom: 5px dotted #999;

margin: 0;

padding: 0 0 10px;

}

h1 span {

font-weight: bold;

display:block;

font-size:1.5em;

color: #fff000;

}

p {

font-size: 1.3em;

color: #999;

}

strong {

color: #fff;

}

.vert {

width: 580px;

height: 190px;

position: absolute;

top: 50%;

left: 50%;

margin: -95px 0 0 -290px;

}

[size=4]問題延伸

[/size]

如果元素的外面還有一個父級元素,如果才能讓元素垂直居中于父級元素內(nèi)部?比如下面的代碼,多了一個父級元素

<div class="container">

<div class="vert">

<h1>Hi, I'm Nested &<span>Vertically Aligned</span></h1>

<p>Abigo sudo mara paulatim odio, accumsan luptatum nibh nibh refero metuo opes ut fatua. Acsi et fere similis <strong>Using</strong> augue <strong>absolute</strong> validus. Regula <strong>positioning</strong> eu jus vel, indoles fere iaceo ea similis. Velit praemitto nulla vel luctus secundum. </p>

</div>

</div>

這時候,就必須在定義父級元素的CSS代碼中加入position: relative;才能夠使內(nèi)部元素垂直居中于父級內(nèi)部,代碼如下:

.container {

position: relative;

height: 500px;

width: 800px;

border: 10px solid #999;

background: #000;

margin: 20px;

}

轉(zhuǎn)載請保留原文地址: http://m.448gfe.cn/show-466.html

責編:王麗 作者:不詳 來源:網(wǎng)絡(luò)