div的文字如何垂直居中

作者：发布时间：2013-11-13 点击：

<!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居中。

上一篇：移动终端浏览器初始设置apple-mobile-web-app-capable
下一篇：CSS纵向居中问题

新闻资讯

2023-09-19
php中$_GET是什么意思
2013-06-26
用JavaScript(js)对时间格式化
2014-03-03
导入Excel到数据库
2023-01-29
c#中Enumerable.Range 使用
2024-07-11
关于Mysql 中 Row size too large (＞ 8126) 错误的解决
2012-07-02
搜索引擎优化时，怎样确定长尾关键词!