日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁 > 云知道 > >

CSS設置DIV垂直居中的N種方法 兼容IE瀏覽器

云知道

在說到這個問題的時候，也許有人會問CSS中不是有vertical-align屬性來設置垂直居中的嗎？即使是某些瀏覽器不支持我只需做少許的CSS Hack技術(shù)就可以??！所以在這里我還要啰嗦兩句，CSS中的確是有vertical-align屬性，但是它只對(X)HTML元素中擁有valign特性的元素才生效，例如表格元素中的td、th、caption等，而像div、span這樣的元素是沒有valign特性的，因此使用vertical-align對它們不起作用 。
Tips: 完美解決方案在文末！
一、單行垂直居中
如果一個容器中只有一行文字，對它實現(xiàn)居中相對比較簡單，我們只需要設置它的實際高度height和所在行的高度line-height相等即可 。
如：
XML/HTML Code復制內(nèi)容到剪貼板
div{
height:25px;
line-height:25px;
overflow:hidden;
}


這段代碼很簡，后面使用overflow:hidden的設置是為了防止內(nèi)容超出容器或者產(chǎn)生自動換行，這樣就達不到垂直居中效果了 。
XML/HTML Code復制內(nèi)容到剪貼板
html
head
title單行文字實現(xiàn)垂直居中/title
metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/
styletype=text/css
body{font-size:12px;font-family:tahoma;}
div{
height:25px;
line-height:25px;
border:1pxsolid#FF0099;
background-color:#FFCCFF;
}


/style
/head
body


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


/html


二、多行未知高度文字的垂直居中
如果一段內(nèi)容，它的高度是可變的那么我們就可以使用上一節(jié)講到的實現(xiàn)水平居中時使用到的最后一種方法，就是設定Padding，使上下的padding值相同即可 。同樣的，這也是一種看起來的垂直居中方式，它只不過是使文字把div完全填充的一種訪求而已 ?？梢允褂妙愃葡旅娴拇a：
CSS Code復制內(nèi)容到剪貼板
div{


padding:25px;


}


這種方法的優(yōu)點就是它可以在任何瀏覽器上運行，并且代碼很簡單，只不過這種方法應用的前提就是容器的高度必須是可伸縮的 。
XML/HTML Code復制內(nèi)容到剪貼板
html
head
title多行文字實現(xiàn)垂直居中/title
metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/


styletype=text/css


body{font-size:12px;font-family:tahoma;}
div{
padding:25px;
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;


}
/style
/head
body
divbrpre現(xiàn)在我們要使這段文字垂直居中顯示！
/prebr/div


/body


/html


三、多行文本固定高度的居中
在本文的一開始，我們已經(jīng)說過CSS中的vertical-align屬性只會對擁有valign特性的(X)HTML標簽起作用，但是在CSS中還有一個display屬性能夠模擬table，所以我們可以使用這個屬性來讓div模擬table就可以使用vertical-align了 。注意，display:table和display:table-cell的使用方法，前者必須設置在父元素上，后者必須設置在子元素上，因此我們要為需要定位的文本再增加一個div元素：


CSS Code復制內(nèi)容到剪貼板
div#wrap{
height:400px;
display:table;
}
div#content{
vertical-align:middle;
display:table-cell;
border:1pxsolid#FF0099;
background-color:#FFCCFF;
width:760px;
}


XML/HTML Code復制內(nèi)容到剪貼板
html
head
title多行文字實現(xiàn)垂直居中/title
metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/
styletype=text/css
body{font-size:12px;font-family:tahoma;}
div#wrap{
height:400px;

推薦閱讀