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

2021-09-10 23:22:33 字數 771 閱讀 8262

什麼叫行內元素（內聯元素）？

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

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

一般在css中新增屬性：

display:inline //這時設定成了內聯元素
什麼叫塊級元素？

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

一般在css中新增屬性：

display:block //這時設定成了塊級元素
1.css設定行內元素的水平居中：

text-align:center
2.css設定行內元素的垂直居中：

height:30px;


line-height:30px
3.既要水平居中又要垂直居中：

text-align:center;


height:30px;


line-height:30px
4.css設定塊級元素的水平居中和垂直居中：關鍵**：

margin:0 auto;
塊級元素的居中，樣式比較靈活，具體詳情見：塊級元素水平垂直居中方法）

行內元素 塊級元素和行內塊級元素

而標籤的屬性是可以轉換的 display inline 轉換為行內元素 display linline block 轉換為行內塊元素 display block 轉換為塊級元素。行內元素 無法設定寬高 margin和padding上下無效，只有左右有效果 總是和相鄰的行內元素在同一行上，預設排列方式...

CSS塊級元素和行內元素

塊元素一般都從新行開始，它可以容納內聯元素和其他塊元素,常見塊元素是段落標籤 p form 這個塊元素比較特殊，它只能用來容納其他塊元素。如果沒有css的作用，塊元素會順序以每次另起一行的方式一直往下排。而有了css以後，我們可以改變這種html的預設布局模式，把塊元素擺放到你想要 的位置上去。而不...

CSS塊級元素和行內元素

1.寬高 width 數值 height 數值 也可用百分比！長高的設定不會被後代繼承 2.背景 1 背景顏色 background color 顏色值 元素的背景顏色預設為transparent background color 不會被後代繼承。2 背景 使用background image 屬性...