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

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

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

 

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

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

 

PS:當然，如果既要水平居中又要垂直居中，那么綜合一下

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

 

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

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

 

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

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

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

 

什么叫行內元素？

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

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

當然，這不是絕對的，通過CSS可以讓任何行內元素變成塊級元素！比如：

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

 

什么叫塊級元素？

常見的div、p、li、h1、h2、h3、h4等html標簽都是塊級元素

當然，這也不是絕對的，通過CSS可以讓任何塊級元素變成行內元素！比如：

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

 

總結：

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

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