029_CSS水平对齐
生活随笔
收集整理的這篇文章主要介紹了
029_CSS水平对齐
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. 使用margin屬性來水平對齊
1.1. 可通過將左和右外邊距設置為"auto", 來對齊塊元素。把左和右外邊距設置為auto, 規定的是均等地分配可用的外邊距, 結果就是居中的元素。
1.2. 使用margin: auto, 一定要聲明!DOCTYPE, 否則在某些瀏覽器版本中無效。
1.3. 如果寬度是100%, 則對齊沒有效果。
1.4. 例子
1.4.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>使用margin屬性來水平對齊</title><style type="text/css">.center {margin: 0 auto;width: 70%;background-color: #b0e0e6;}</style></head><body><div class="center"><p>這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。</p><p>這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。</p></div></body> </html>1.4.2. 效果圖
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的029_CSS水平对齐的全部內容，希望文章能夠幫你解決所遇到的問題。
