<![CDATA[武冈论坛官方博客]]> http://blog.wugangbbs.com/index.php zh-cn http://blog.wugangbbs.com/post// <![CDATA[div的未知高度文字垂直居中]]> admin <admin@yourname.com> Tue, 02 Feb 2010 17:27:17 +0000 http://blog.wugangbbs.com/post//
<!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 style="border:1px solid red">1</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居中。 ]]> http://blog.wugangbbs.com/post//#blogcomment <![CDATA[[评论] div的未知高度文字垂直居中]]> <user@domain.com> Thu, 01 Jan 1970 00:00:00 +0000 http://blog.wugangbbs.com/post//#blogcomment