多行文本固定高度的居中

最新推荐文章于 2021-08-09 16:36:41 发布

ke0971

最新推荐文章于 2021-08-09 16:36:41 发布

阅读量426

点赞数

分类专栏： HTML 文章标签： html

HTML 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

多行文本固定高度的居中

http://www.jb51.net/web/73274.html
http://www.cbcie.com/group/resource.html

在本文的一开始，我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一个display属性能够模拟<table>，所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个<div>元素：

div#wrap { height: 400px; display: table; }
div#content { vertical-align: middle; display: table-cell; border: 1px solid #FF0099; background-color: #FFCCFF; width: 760px; }

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        body { font-size: 12px; font-family: tahoma; }
        div#wrap { height: 400px; display: table; }
        div#content { vertical-align: middle; display: table-cell; border: 1px solid #FF0099; background-color: #FFCCFF; width: 760px; }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="content">
            <pre>现在我们要使这段文字垂直居中显示！ Webjx.Com 
 div#wrap {
  height:400px;
  display:table;
 }
 div#content {
  vertical-align:middle;
  display:table-cell;
  border:1px solid #FF0099;
  background-color:#FFCCFF;
  width:760px;
 }
</pre>
        </div>
    </div>
</body>
</html>