关于网页中不同元素对齐的方法总结（1）

很多时候我们都需要将网页中的不同内容以某一种对齐方式来放置，水平的对齐就好办很多了，例如需要对一个层的文字来水平对齐，我们只需要写一个简单样式：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下面的解决方案！