一聚教程网:一个值得你收藏的教程网站

热门教程

css 文字垂直居中实现方法总结

时间:2022-06-25 09:39:24 编辑:袖梨 来源:一聚教程网

实际上,一个Box中由很多行很多元素组成,vertical-align只作用于在同一行内的元素,它的垂直并不是相对于整个Box而言的。前面定义了一个60px的高度,但是这个Box中存在很多行,那段文本并不能对齐到中央。因此希望那段文本对齐中间,需要给它定义一个line-height的属性,让line-height为60px,作用于一行的vertical-align就可以工作了。  

如果是单行文字想垂直居中,只要保证div高和行高保持一致,就可以了。用下面的代码即可实现:

 代码如下 复制代码

CSS代码:
#div-a{
height:60px;
line-height:60px;
}

XHTML代码:


飘易博客欢迎大家访问@


如果还想让div里的文字水平居中,加上“text-align:center;”即可;代码如下:

 代码如下 复制代码

CSS代码:

#div-a{
text-align:center;
height:60px;
line-height:60px;
}

XHTML代码:


飘易博客欢迎大家访问@

说明:如果在父级元素定义TEXT-ALIGN:center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT:auto;MARGIN-LEFT:auto;”。


DIV中多行文字的垂直居中
3.1 利用Table使Div多行文字垂直居中
    对于多行文字,上面的垂直居中的方法就不行了,可以在div里嵌套一个table,因为vertical-align:middle;对table的垂直居中是有效的。

 代码如下 复制代码
 
 
  
 
 

     div中利用table的vertical-align:middle;属性实现多行文字的垂直居中功能。
  

3.2 利用Padding实现Div多行未知高度文字的垂直居中
    对于多行文字,如果不考虑容器高度,则可以定义 padding-bottom 和 padding-top ,使上下的padding值相同,也能实现div多行文字的垂直居中。这是一种“看起来居中”的垂直居中方式,它只是使文字把

完全填充。这种实现方式的特点如下:

优点:
  1. 同时支持块级和内联极元素
  2. 支持非文本内容
  3. 支持所有浏览器
缺点:
  容器不是固定高度

3.3 利用Display模拟Table实现div多行文字的垂直居中
    CSS中有一个display属性能够模拟

,可以使用这个属性来让
模拟
,这样就可以使用vertical-align了。注意,display:table和display:table-cell的使用方法,前者必须设置在父元素上,后者必须设置在子元素上,因此我们要为需要定位的文本再增加一个
元素。

 代码如下 复制代码

//CSS代码
div #wrap {   
   height:200px;   
   display:table;   
}   
div #content {   
   vertical-align:middle;   
   display:table-cell;   
   border:1px solid #FF0099;   
   background-color:#FFCCFF;   
   width:40px;
}

//Html代码

   
 

   

        display模拟table实现div多行文字垂直居中显示!     
   

 
   
 

但是Internet Explorer 6 不支持display:table和display:table-cell,因此这种方法在Internet Explorer 6及以下的版本中是无效的。

Explorer 6中的垂直居中:

 代码如下 复制代码

//CSS代码
div#wrap {  
  border:1px solid #FF0099;  
  background-color:#FFCCFF;  
  width:760px;  
  height:400px;  
  position:relative;  
}  
div#subwrap {  
  position:absolute;  
  border:1px solid #000;  
  top:50%;  
}  
div#content {  
  border:1px solid #000;  
  position:relative;  
  top:-50%;  
}

//Html代码

  
 
  
   

     

         现在我们要使这段文字垂直居中显示!