很多时候我们都需要将网页中的不同内容以某一种对齐方式来放置,水平的对齐就好办很多了,例如需要对一个层的文字来水平对齐,我们只需要写一个简单样式:text-align:left/center/right。如果是需要对一个块或者一个层来对齐我们可以使用float:left/right,如果需要对整个网页对齐我们可以使用<center>标签,也可以使用通用的样式body{margin:0px auto;width:*px},但是如果需要对内容来作垂直方向的对齐呢?这是一个比较麻烦的问题,下面就介绍几种不同内容对齐的方法。
1.单行文本的对齐:如果容器里面就只有一行文字,那对齐就简单很多了,我们可以定一个这样的样式:div { height:20px; line-height:20px; }
但是这种方法有一个局限,文字只能是一行,如果有多行的话那这个方法就不适用了,就算是加一个overflow:hidden;也会将我们需要显示的内容隐藏掉。
二、多行未知高度文字的垂直居中:如果需要将多行文字垂直居中对齐,我们可以将这些文字作成一个块,就是在文字两端加一个DIV,然后对这个DIV加相应的margin或者 padding值,使上下的padding值或者margin 值相同即可。但是这只是一种“看起来”的垂直居中方式,并不是真正意义上的居中。同时如果内容发生变化那这些值都需要去做改变,不是很方便。代码片段:div { padding:20px; ,总体来说}这种方法的优点就是它可以在任何浏览器上运行,并且代码很简单,只不过这种方法应用的前提就是容器的高度必须是可伸缩的。最大的问题是层的宽和高的变化有可能影响整个网页的布局,需要仔细考虑。
三、多行文本固定高度的居中:我们知道CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用,例如表格,但是DIV毕竟不是表格,有没有什么方法可以让DIV变成表格的显示方式呢?在CSS中还有一个display属性能够模拟<table>,所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意,display:table和display:table-cell的使用方法,前者必须设置在父元素上,后者必须设置在子元素上,因此我们要为需要定位的文本再增加一个<div>元素:
代码片段:
#wrap {
height:300px;
display:table;
}
#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FFF;
background-color:#CCC;
width:550px;
}
这个方法应该是很理想了,但是不幸的是IE6 并不能正确地理解display:table和display:table-cell,因此这种方法在IE6及以下的版本中是无效的。嗯,这让人很郁闷!不过我们还其它的办法。下一次将会讨论在IE6下面的解决方案!