主营业务:网站制作 网站优化 小程序制作 石家庄网站制作网站建设有限公司欢迎您!
石家庄闪云网络科技有限公司
客服热线15383239821
如何让自己的网站更有质量?

div的文字如何垂直居中

发布时间:2013/11/13 10:52:58

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

相关新闻推荐

在线客服 : 服务热线:15383239821 电子邮箱: 27535611@qq.com

公司地址:石家庄市新华区九中街江西大厦4062

备案号:冀ICP备2022000585号-4