HTML學習筆記 各種居中對齊

2021-09-08 17:45:34 字數 1567 閱讀 3083

0.前言

水平居中基本方法——指定塊的寬度並設定塊的左右外邊距為auto,上下外邊距可取0,那麼該塊能夠在父元素中水平居中。

樣式例如以下:

1:margin:0px auto

2:margin-left:auto; margin-right:auto;

垂直居中基本方法——設定塊的上下內邊距相等。

樣式例如以下:

padding-top:20px; padding-bottom:20px;

1.div居中對齊

【html】

【效果】

body中有乙個id為all的塊,該塊的寬度為500px,高度為200px。通過margin:0px auto在body中水平居中。

圖1 div居中

2.div中文字居中

【html】

center

【效果】

body中有乙個id為all的塊,該塊的寬度為500px,高度為200px。在body中水平居中。

在名稱為all的塊中有乙個id為string的塊。通過margin:0px auto使得該塊在父元素中水平居中。

text-align:center使得

圖2 div 文字水平居中

3 div居中

【html】

center

【效果】

在div中居中的方法和文字同樣,父div中設定text-align:center就可以。

假設須要垂直居中,那麼能夠設定父div的上下內邊距。比如 padding-top:20px;padding-bottom:20px;

圖3 div中影象水平居中

4.**內容居中

【html】——html寫法

文字居中

【效果】

使得**在父div中水平居中。

使得單元格中的內容水平居中,請注意單元格中的內容預設垂直居中。

圖4 **內容居中——html寫法

【html】css寫法

文字居中

【效果】

table,使得**在父div中水平居中

td,單元格內容水平居中,請注意td和有同樣效果。

效果和如圖4所看到的。

參考資料

為你總結老生常談的 --- css居中

實現div層內的文字垂直居中

HTML學習筆記 各種居中對齊

0.前言 水平居中基本方法 指定塊的寬度並設定塊的左右外邊距為auto,上下外邊距可取0,那麼該塊可以在父元素中水平居中。樣式如下 1 margin 0px auto 2 margin left auto margin right auto 垂直居中基本方法 設定塊的上下內邊距相等。樣式如下 pad...

各種居中對齊

對於不是編輯中的 進行複製時,一定要注意 空格的複製可能會是整個html和樣式都顯示無效,需要刪除所有複製的空格才可以正常顯示,對於下面 的複製也一樣 text align center 只對塊級元素有效,且是塊級元素內的內容水平居中,而不是整個塊級元素。如果是想讓塊級元素水平居中,可在需要居中的塊...

CSS學習系列6 居中對齊

對於css頁面布局來說,居中對齊很常用,在這裡我們歸納總結一下各種居中對齊的方法。1.頁面居中對齊 居中對齊乙個元素 如 可以使用margin auto,必須要設定元素的寬度,通過指定寬度,將兩邊的空外邊距平均分配,達到頁面元素居中對齊的目的。注意 如果不設定width屬性 或設定為100 居中對齊...