div的文字如何垂直居中
浏览量： 次
<!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>无标题文档</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，因为要考虑到IE6，所以不用display: table-cell的方式。
2，因为你说文字的内容不固定，所以可能产生换行，所以不用height = line-height的方式。
给span, b设置display: inline-block，目的是为了让它们在div里是以一行的方式呈现。再给b设置高度100%，让它占满div里的一行，而前面的span就可以自动补白，同样占满这一行。最后设置vertical-align: middle，让span居中。
[声明]本网转载网络媒体稿件是为了传播更多的信息，此类稿件不代表本网观点，本网不承担此类稿件侵权行为的连带责任。故此，如果您发现本网站的内容侵犯了您的版权，请您的相关内容发至此邮箱【27535611@qq.com】，我们在确认后，会立即删除，保证您的版权。