24直播网体育在线直播_24直播网体育下载_24直播网nba直播

IT貓撲網(wǎng):您身邊最放心的安全下載站! 最新更新|軟件分類|軟件專題|手機(jī)版|論壇轉(zhuǎn)貼|軟件發(fā)布

您當(dāng)前所在位置: 首頁(yè)網(wǎng)絡(luò)編程DIVCSS → Div教程:實(shí)現(xiàn)div容器垂直居中的方法小結(jié)

Div教程:實(shí)現(xiàn)div容器垂直居中的方法小結(jié)

時(shí)間:2015-06-28 00:00:00 來(lái)源:IT貓撲網(wǎng) 作者:網(wǎng)管聯(lián)盟 我要評(píng)論(9)

其實(shí)水平居中實(shí)現(xiàn)還是比較簡(jiǎn)單的,反而垂直居中有點(diǎn)麻煩,因?yàn)槲覀冊(cè)O(shè)計(jì)頁(yè)面的時(shí)候往往水平寬度都是固定的。因此我們有必要總結(jié)一下在頁(yè)面布局過(guò)程中實(shí)現(xiàn)垂直居中的方法。
在說(shuō)到這個(gè)問(wèn)題的時(shí)候,也許有人會(huì)問(wèn)CSS中不是有vertical-align屬性來(lái)設(shè)置垂直居中的嗎?即使是某些瀏覽器不支持我只需做少許的CSS?Hack技術(shù)就可以啊!所以在這里我還要啰嗦兩句,CSS中的確是有vertical-align屬性,但是它只對(duì)(X)HTML元素中擁有valign特性的元素才生效,例如表格元素中的、、等,而像

、這樣的元素是沒(méi)有valign特性的,因此使用vertical-align對(duì)它們不起作用。

一、單行垂直居中

?如果一個(gè)容器中只有一行文字,對(duì)它實(shí)現(xiàn)居中相對(duì)比較簡(jiǎn)單,我們只需要設(shè)置它的實(shí)際高度height和所在行的高度line-height相等即可。如:???

div?{???
??height:25px;???
??line-height:25px;???
??overflow:hidden;???
?}?

這段代碼很簡(jiǎn),后面使用overflow:hidden的設(shè)置是為了防止內(nèi)容超出容器或者產(chǎn)生自動(dòng)換行,這樣就達(dá)不到垂直居中效果了。

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml
">
?
? 52CSS.com
?
?
?

?
?

現(xiàn)在我們要使這段文字垂直居中顯示!

?

不過(guò)在Internet?Explorer?6及以下版本中,這和方法不支持對(duì)圖片設(shè)置垂直居中。

二、多行未知高度文字的垂直居中

如果一段內(nèi)容,它的高度是可變的那么我們就可以使用上一節(jié)講到的實(shí)現(xiàn)水平居中時(shí)使用到的最后一種方法,就是設(shè)定Padding,使上下的padding值相同即可。同樣的,這也是一種"看起來(lái)"的垂直居中方式,它只不過(guò)是使文字把

完全填充的一種訪求而已??梢允褂妙愃葡旅娴拇a:?

div?{???
?padding:25px;???
}

這種方法的優(yōu)點(diǎn)就是它可以在任何瀏覽器上運(yùn)行,并且代碼很簡(jiǎn)單,只不過(guò)這種方法應(yīng)用的前提就是容器的高度必須是可伸縮的。

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml
">
?
? 52CSS.com
?
?
?

?
?

現(xiàn)在我們要使這段文字垂直居中顯示!
? ?div {
??padding:25px;
??border:1px solid #FF0099;
??background-color:#FFCCFF;
?}

?

關(guān)鍵詞標(biāo)簽:方法,垂直,教程,實(shí)現(xiàn),

相關(guān)閱讀 ip地址設(shè)置方法|電腦ip地址設(shè)置:xp本地連接ip設(shè)置方法 提示dns服務(wù)錯(cuò)誤怎么辦 dns錯(cuò)誤問(wèn)題多種解決方法 如何關(guān)閉電腦端口 關(guān)閉不常用端口的2種方法 sql server系統(tǒng)表?yè)p壞的解決方法 Linux操作系統(tǒng)單用戶登陸方法 XP開(kāi)機(jī)時(shí)DLL文件出錯(cuò)的解決方法

文章評(píng)論
發(fā)表評(píng)論

熱門(mén)文章 DIV+CSS網(wǎng)頁(yè)布局常用的一些基礎(chǔ)知識(shí)整理 DIV+CSS網(wǎng)頁(yè)布局常用的一些基礎(chǔ)知識(shí)整理 完美解決CSS網(wǎng)頁(yè)水平居中 完美解決CSS網(wǎng)頁(yè)水平居中 XHTML+CSS兼容解決方案 XHTML+CSS兼容解決方案 CSS網(wǎng)頁(yè)布局困擾新手的八個(gè)問(wèn)題 CSS網(wǎng)頁(yè)布局困擾新手的八個(gè)問(wèn)題

相關(guān)下載

人氣排行 DIV CSS完美兼容IE6/IE7/FF的通用方法 CSS實(shí)例:list-style-type在IE與FF中奇怪的現(xiàn)象解析-CSS布局實(shí)例 CSS實(shí)例:通過(guò)定義漸變邊框給圖片加陰影 CSS常用技巧之一 禁止文字自動(dòng)換行 網(wǎng)頁(yè)頁(yè)面設(shè)計(jì)中CSS十大注意 解決用CSS控制DIV居中失效的問(wèn)題 css div設(shè)置float后高度不能自動(dòng)增加 讓CSS兼容IE和Firefox的技巧集合