服務(wù)熱線
153 8323 9821
咨詢熱線 ：
15383239821
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>無(wú)標(biāo)題文檔</title>
<style type="text/css">
div {
height: 200px;
border: 1px solid;
}
span, b {
display: inline-block;
vertical-align: middle;
}
b {
height: 100%;
}
</style>
</head>
<body>
<div>
<span>HELLO WORLD<br />HELLO WORLD<br />HELLO WORLD<br />HELLO WORLD<br /></span>
<b></b>
</div>
</body>
</html>
1，因?yàn)橐紤]到IE6，所以不用display: table-cell的方式。
2，因?yàn)槟阏f(shuō)文字的內(nèi)容不固定，所以可能產(chǎn)生換行，所以不用height = line-height的方式。
給span, b設(shè)置display: inline-block，目的是為了讓它們?cè)赿iv里是以一行的方式呈現(xiàn)。再給b設(shè)置高度100%，讓它占滿div里的一行，而前面的span就可以自動(dòng)補(bǔ)白，同樣占滿這一行。最后設(shè)置vertical-align: middle，讓span居中。
