参考链接: http://www.cnblogs.com/lufy/archive/2012/09/12/2681972.html http://zhidao.baidu.com/question/69214815.html
对于文字的水平居中,text-align:center可以解决,垂直居中情况较复杂,分类讨论:
一、单行垂直居中
单行文本,如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如:
div{
height:100px;
line-height:100px;
overflow:hidden;
}
这段代码很简单,后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行,这样就达不到垂直居中效果了。
不过在Internet Explorer 6及以下版本中,这和方法不支持对图片设置垂直居中
二、多行未知高度文字的垂直居中
如果一段内容,它的高度是可变的,那么我们设定Padding,使上下的padding值相同即可。同样的,这也是一种“看起来”的垂直居中方式,它只不过是使文字把<div>完全填充的一种方式而已。可以使用类似下面的代码:
div { padding:25px; border:1px solid #FF0099; background-color:#FFCCFF; width:760px; }
三、多行文本固定高度的居中
在本文的一开始,我们已经说过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; }
<div id="wrap"> <div id="content">
<pre>现在我们要使这段文字垂直居中显示! 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> 上面的方法ie8及以下都不支持,下面是完美解决兼容性问题的方法:
四、完美的解决方案
.outer { display:table; width:578px; overflow:hidden; background: #eee; height: 42px; } .middle {display:table-cell; vertical-align:middle; margin-left 10px;} <!--下面的CSS是针对IE8,IE7,IE6--> <!--[if lte IE 8]> <style> .outer{position:relative;} .middle{position: absolute; top: 50%;} .inner{position: relative; top:-50%} </style> <![endif]-->
以上是样式!~
这里我们需要定义三个DIV:
外层(outer) 可以根据需要定义高度、宽度,但是display必须为table。
中间层(middle) 可以有特定的CSS样式,例如:margin-left,但是display必须为table-cell,vertical-align必须为middle。
内层(inner) 主要是用来对付IE6和IE7 Ie8的()。
有了上面的CSS,HTML代码可以这么写:
<div class="outer"> <div class="middle"> <div class="inner"> 把你要居中的文本放在这里 这是第二行 ... </div> </div> </div>
时间: 2024-10-07 05:29:42