2017/07

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

發(fā)布時間：2017-07-01 19:34:43

發(fā)布者：jiangbing

瀏覽量:

在寫頁面時經(jīng)常會碰到文字在div中要居中的情況。水平居中很容易，text-align:center就能實現(xiàn)；但垂直居中很少用到，要么就是直接給margin，但現(xiàn)在講解一下不用margin如何實現(xiàn)垂直居中。

  
  
  
  
讓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%;}  
  
  
  

	設計理念
	在拍攝的角度去考慮實景的設計，
	我們對每一客戶的空間進行精準測量。
	了解客戶拍攝習慣、風格、拍攝器材，
	更準確測算射距、光線等因素。
	實景設計規(guī)劃由設計師綜合各方面因素設計，
	只為確保最終拍攝效果。

這里其實主要用的css是這兩個，display:table-cell;vertical-align: middle;

display:table-cell w3c給出的解釋是此元素會作為一個表格單元格顯示（類似和）

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

通過上述代碼就能實現(xiàn)。

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

上一篇： bootstrap如何兼容IE8

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

關鍵詞: