CSS Alignment(元素對齊)

CSS具有幾個(gè)可用于對齊網(wǎng)頁元素的屬性。

文字對齊

可以通過正確設(shè)置文本對齊，來對齊塊級元素內(nèi)的文本。

h1 {
    text-align: center;
}
p {
    text-align: left;
}

請參閱CSS Text教程，以了解有關(guān)文本格式的更多信息。

使用margin屬性進(jìn)行中心對齊

塊級元素的中心對齊是CSS margin屬性最重要的含義之一。 例如，通過將左右邊距設(shè)置為auto，可以將<div>容器水平居中對齊。

div {
    width: 50%;
    margin: 0 auto;
}

上面示例中的樣式規(guī)則將元素水平居中對齊。

使用position屬性對齊元素

CSS position與，和屬性結(jié)合使用left，可以使元素相對于文檔的視口對齊或包含父元素。righttopbottom

.up {
    position: absolute;
    top: 0;
}
.down {
    position: absolute;
    bottom: 0;
}

要了解有關(guān)定位元素的更多信息，請參閱CSS定位教程。

使用float屬性進(jìn)行左右對齊

CSS的float屬性可用于對齊到左側(cè)或右側(cè)的其包含塊的元件以這樣的方式，其它內(nèi)容可沿其側(cè)流動。

因此，如果元素浮動到左側(cè)，則內(nèi)容將沿其右側(cè)流動。相反，如果元素浮動到右側(cè)，則內(nèi)容將沿其左側(cè)流動。

div {
    width: 200px;
    float: left;
}

清除浮動

使用基于浮動的布局時(shí)最令人困惑的事情之一是折疊的父級。 父元素不會自動拉伸以容納浮動元素。 但是，如果父級不包含任何視覺上可察覺的背景或邊框，這并不總是很明顯，但是要注意并必須加以處理以防止出現(xiàn)奇怪的布局和跨瀏覽器問題，這一點(diǎn)很重要。 請參見下圖：

您會看到

元素不會自動拉伸以容納浮動圖像?？梢酝ㄟ^在容器中的浮動元素之后但在容器元素的關(guān)閉標(biāo)簽之前清除浮動來解決此問題。

修復(fù)折疊的父級

有幾種方法可以解決CSS折疊父級問題。下一節(jié)將向您介紹這些解決方案以及實(shí)時(shí)示例。

解決方案1：浮動容器

解決此問題的最簡單方法是浮動包含的父級元素。

.container {
    float: left;
    background: #f2f2f2;
}

解決方案2：使用空Div

這是一種老式的方法，但是是一種簡單的解決方案，可在所有瀏覽器上使用。

.clearfix {
    clear: both;
}
/* html code snippet */

您也可以通過標(biāo)簽來執(zhí)行此操作。但是不建議使用此方法，因?yàn)樗鼤跇?biāo)記中添加非語義代碼。

解決方案3：使用：after偽元素

該:after 偽元素與聯(lián)合content財(cái)產(chǎn)已經(jīng)相當(dāng)廣泛地用于解決浮清算的問題。

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

該類.clearfix適用于任何具有浮動子代的容器。