使用寬度,最大寬度和margin: auto;
正如前面章節所提到的; 一個塊級元素總是佔用可用的全寬(伸出到左邊和右邊,只要它可以)。
設定width
的塊級元素的會阻止它伸出到其容器的邊緣。 然後,您可以設置頁邊距為自動,水平居中其容器內的元素。 該元件將佔據指定的寬度,並且剩餘的空間將同樣在兩個邊緣之間劃分:
這個<div>元素有一個500px的寬度和margin設置為auto 。
注意:有問題的<div>
以上時,瀏覽器窗口比元素的寬度發生。 瀏覽器然後添加一個水平滾動條到頁面上。
使用max-width
代替,在這種情況下,將提高的小窗口瀏覽器的處理。 使網站在小型設備上可用時,這是非常重要的:
這個<div>元素有一個500px的最大寬度,和margin設置為auto 。
提示:調整瀏覽器窗口小於500像素寬,看到兩個div的區別!
這裡是上面的兩個div的例子:
例
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
試一試»