水平置中

Posted on 2015-04-17 Edited on 2023-11-24 In CSS Views: Disqus:

一個網頁的水平置中通常有兩種方法可一起合用，分別為內文置中與區塊置中，

1.內文置中

使用text-align : center

記得要設在父元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <style>
        .c1 {
            background-color: red;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="c1">
        <p>this is a paragraphy</p>
        <p>this is a paragraphy</p>
        <p>this is a paragraphy</p>
        <img src="http://i.imgur.com/64bhJcp.png">
    </div>
</body>
</html>

2.區塊置中

使用margin : 0 auto

被置中的區塊自己必須要有寬度並且為塊級元素才可以用auto來平均左右邊界間距。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <style>
        .c2 {
            background-color: blue;
            width: 50%;
            margin: 0 auto;
        }

        .block {
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="c2">
        <p>this is a paragraphy</p>
        <p>this is a paragraphy</p>
        <p>this is a paragraphy</p>
        <img class="block" src="http://i.imgur.com/64bhJcp.png">
    </div>
</body>
</html>