DIV单行居中问题

lglgis · 发表于 2013-2-7 14:49:06

如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如：
div {
  height:25px;
  line-height:25px;
  overflow:hidden;
}

这段代码很简单，后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了。

<!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>单行文字实现垂直居中 - www.cxybl.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
   body { font-size:12px;font-family:tahoma;}
   div {
      height:25px;
      line-height:25px;
      border:1px solid #FF0099;
      background-color:#FFCCFF;
   }
</style>
  </head>
  <body>
<div>现在我们要使这段文字垂直居中显示！</div>
  </body>
</html>

不过在Internet Explorer 6及以下版本中，这和方法不支持对图片设置垂直居中。
原文链接：http://www.cxybl.com/html/wyzz/CSS/20120430/23365.html

		自动登录	找回密码
密码			立即注册

DIV单行居中问题

浏览过的版块