CSS:排版置中 (區塊 or 文字)

排版上常會遇到需要水平置中的情況,首先必須先搞清楚要置中的是什麼東西,是區塊還是文字?

* 如果是區塊中區塊元素置中的話

<div class="parent">
    <div class="child">
    </div>
</div>

把要置中元素的左右邊距設成 auto

.child {
    margin-left: auto;
    margin-right: auto;
}

通常會這樣寫一次設定

.child {
    margin: 0px auto;
}

但要注意這是會在 parent 這個 div 裡面置中
也要注意 parent 的長寬

另外如果 child 是行內元素的話必須加上

.child {
    display: block;
}

因為只有區塊元素有 Box Model 的 padding, border, margin 屬性

* 如果是區塊中單行文字置中的話

把父元素的

<div class="parent">
    <span>把這行置中</span>
</div>

line-height 設成 父元素的 height
text-align 設成 center

.parent {
    height: 30px;
    text-align: center;
    line-height: 30px;
}

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s