2017/07

如何让DIV中的文字垂直居中？

发布时间：2017-07-01 19:34:43

发布者：jiangbing

浏览量:

在写页面时经常会碰到文字在div中要居中的情况。水平居中很容易，text-align:center就能实现；但垂直居中很少用到，要么就是直接给margin，但现在讲解一下不用margin如何实现垂直居中。

  
  
  
  
让DIV标签中的P标签水平和垂直都居中  
 
* { margin:0; padding:0;}	
div{display:table-cell;vertical-align: middle;text-align: center;letter-spacing: 3px;width: 525px;height: 336px;border: 1px solid #000;} 
p {width:100%;}  
  
  
  

	设计理念
	在拍摄的角度去考虑实景的设计，
	我们对每一客户的空间进行精准测量。
	了解客户拍摄习惯、风格、拍摄器材，
	更准确测算射距、光线等因素。
	实景设计规划由设计师综合各方面因素设计，
	只为确保最终拍摄效果。

这里其实主要用的css是这两个，display:table-cell;vertical-align: middle;

display:table-cell w3c给出的解释是此元素会作为一个表格单元格显示（类似和）

vertical-align: middle 字面意思就是垂直居中：中间

通过上述代码就能实现。

演示地址：http://www.cnwenhui.cn/d/demo/vertical/

上一篇： bootstrap如何兼容IE8

下一篇： Swiper 插件如何兼容IE8

关键词: