Css之關於塊級元素水平居中

2021-08-26 18:40:21 字數 496 閱讀 1824

第一種方法:塊級元素如div可以使用margin-left:auto和margin-right:auto來實現,但前提是這個塊級元素必須是設定了固定寬度的。對於不能確定寬度的塊級元素就不能這們做了,但是我們可以用table這個標籤來實現。它的寬度由內部的元素決定(撐開),即使不給它設定固定寬度,對它設定了margin-left:auto和margin-right:auto也能實現水平居中,因此我們可以把想水平居中但又不確定寬度的塊級元素放在table中實現。

第二種方法:就是把塊級元素的display設為inline即改為行內元素,這樣通過設定父元素的text-align:center。來實現居中了,但這樣做後塊級元素就不能設定width屬性了。

第三種方法:就是把父元素增加float:left,同時設定position:relative和left:50%。而子元素設定position:relative和left:-50%來實現水平居中。這樣就可以保留塊級元素的display:block屬性。

三種方法根據具體情況來選擇。

Css之關於塊級元素水平居中

第一種方法 塊級元素如div可以使用margin left auto和margin right auto來實現,但前提是這個塊級元素必須是設定了固定寬度的。對於不能確定寬度的塊級元素就不能這們做了,但是我們可以用table這個標籤來實現。它的寬度由內部的元素決定 撐開 即使不給它設定固定寬度,對它設...

css 不定寬度的塊級元素水平居中

塊級元素水平居中不能用text align center 但是有一種錯覺如下 charset utf 8 不定寬塊狀元素水平居中title div1 div2 style class div1 class div2 aaadiv div1 body html 上述 執行結果如下圖 1.看似包含 aa...

塊級元素水平居中的問題

doctype html html lang en head meta charset utf 8 meta name generator content editplus meta name author content meta name keywords content meta name d...