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 居中對齊...