两种纯CSS实现DIV文字垂直居中的方法

生活日志 马富天 2016-06-13 16:33:19 78 0

【摘要】将近10天没有更新文章了,今天写了一下关于使用纯CSS实现DIV中的文字上下垂直居中的两种方法,希望对大家有所帮助。

方法一,使用table、table-cell样式

能够实现文字垂直居中,并且能够多行文本垂直居中。实现代码如下:

  1. <style type="text/css">
  2. 	.table{
  3. 		width:300px;
  4.                 height:200px;
  5. 		display:table;
  6. 		border:1px solid red;
  7. 	}
  8. 	.table-cell{
  9. 		display:table-cell;
  10. 		vertical-align:middle;
  11. 	}
  12. </style>
  13. <div class="table">  
  14.     <div class="table-cell">  
  15.     	这是通过设置div的属性为table-cell,实现文字垂直居中。
  16.     </div>  
  17. </div> 

效果图如下:

请输入图片名称

使用这种方法的优点是能够实现多行文字居中,缺点是在IE7、IE8浏览器下不兼容。

方法二,使用line-height实现

通过设置DIV的line-height和height的高度相同,实现文字在DIV中居中,代码如下:

  1. <style type="text/css">		
  2. 	.line-height{
  3. 		width:300px;
  4. 		border:1px solid red;
  5. 		height:100px;
  6. 		line-height:100px;
  7. 	}
  8. </style>
  9. <div class="line-height">通过line-height设置文字垂直居中,缺点不是实现多行居中</div>

效果图如下:

请输入图片名称

由上图可以看出缺点是只能实现单行文本,当需要多行文本的时候,会出现文字不在DIV中了,不过也有优点,优点就是兼容所有的浏览器,不存在浏览器不兼容的问题。

这两种方法可以自选,在合适的情况下使用合适的方法。

版权归 马富天PHP博客 所有

本文标题:《两种纯CSS实现DIV文字垂直居中的方法》

本文链接地址:http://www.mafutian.net/142.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

0

0

上一篇《 gulp基本介绍笔记 》 下一篇《 JavaScript判断网页中图片是否加载的三种方法 》
分享到:

暂无评论

评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码