DIV的vertical-align垂直居中对齐方法

2009年11月1日 | 标签:

CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中的td、th、caption等，而像div、span这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。

一、单行垂直居中（兼容IE和FF）
如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如：

  1. <style>
  2. div {
  3.     height:55px;
  4.     line-height:55px;
  5.     overflow:hidden;
  6.     background-color:red;
  7. }
  8. </style>
  9. <div>
  10. 单行文字的垂直居中
  11. </div>

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

二、多行未知高度文字的垂直居中（兼容IE和FF）
这是一种“看起来”的垂直居中方式

  1. <style>
  2. div {
  3.     padding:25px 0px;
  4.     background-color:red;
  5. }
  6. </style>
  7. <div>
  8. 单行文字的垂直居中
  9. </div>

三、多行高度自适应文字的垂直居中（兼容IE和FF）

  1. <style>
  2. div {
  3.     height:55px;
  4.     background-color:red;
  5. }
  6. .middle{
  7.     display:inline-block;
  8.     height:55px;
  9.     width:0px;
  10.     vertical-align:middle;
  11. }
  12. </style>
  13. <div>
  14.     <span class="middle"></span>单行文字的垂直居中
  15. </div>
发表评论 | Trackback
  1. 张
    2009年12月18日19:07
    回复 | 引用 | #1

    你应该来个效果图

  2. DAYU
    2009年12月20日17:32
    回复 | 引用 | #2

    这还要什么效果图。你直接复制另存为运行一下不就得了。

您必须在 登录 后才能发布评论.