CSS設置行內元素和塊級元素的水平居中、垂直居中

時間  2019-11-24
標籤 css 設置 元素 水平 居中 垂直 欄目 CSS 简体版
原文   原文鏈接

CSS設置行內元素的水平居中css

  1. div{text-align:center} /*DIV內的行內元素均會水平居中*/ 

 

CSS設置行內元素的垂直居中html

  1. div{height:30px; line-height:30px} /*DIV內的行內元素均會垂直居中*/ 

 

PS:固然，若是既要水平居中又要垂直居中，那麼綜合一下前端

  1. div{text-align:center; height:30px; line-height:30px} 

 

CSS設置塊級元素的水平居中佈局

  1. div p{margin:0 auto; width:500px} /*塊級元素p必定要設置寬度，
  2. 才能至關於DIV父容器水平居中*/ 

 

CSS設置塊級元素的垂直居中spa

  1. div{width:500px} /*DIV父容器設置寬度*/ 
  2. div p{margin:0 aut0; height:30px; line-height:30px} /*塊級元素p也能夠加個寬度，
  3. 以達到相對於DIV父容器的水平居中效果*/ 

說明：在之後的實際項目中，塊級元素的垂直居中佈局方式可能會碰到比這個更復雜，請關注之後的相關文章！htm

 

什麼叫行內元素？get

常見的span、a、lable、strong、b等html標籤都是行內元素class

默認狀況下，行內元素均沒法設置寬度、高度、上下方向margin的外邊距等容器

固然，這不是絕對的，經過CSS能夠讓任何行內元素變成塊級元素！好比：總結

  1. span{display:block} /*span這時設置成了塊級元素*/ 

 

什麼叫塊級元素？

常見的div、p、li、h一、h二、h三、h4等html標籤都是塊級元素

固然，這也不是絕對的，經過CSS能夠讓任何塊級元素變成行內元素！好比：

  1. h1{display:inline} /*h1這時設置成了行內元素*/ 

 

總結：

前端初學者理解行內元素和塊級元素的概念很重要，這對切圖div+css佈局頗有幫助！若有疑問，歡迎底下留言！

尊重知識產權，文章轉載請註明來源：益享天開 >> CSS設置行內元素和塊級元素的水平居中、垂直居中

相關文章