CSS 基礎（014_Align）

原始網址：http://www.w3schools.com/css/css_align.asp

翻譯：

CSS Layout - Horizontal & Vertical Align

<!DOCTYPE html>
<html>
    <head>
        <style>
            h2 {
                font-size: 30px;
                font-weight: 400;
                margin: 10px 0;
                font-family: "Segoe UI",Arial,sans-serif;
            }
        </style>
    </head>
    <body>
        <div style="border:3px solid green; max-width:500px; margin: auto; padding: 15px">
            <h2>In CSS, several properties can be used to align elements horizontally and vertically.</h2>
        </div>
    </body>
</html>

Center Align Elements

水平居中塊級元素，我們可以使用 margin: auto; 。
設置元素的寬度以組織其延伸到容器的邊界。
元素將佔據指定的寬度，剩餘空間將被均分給左、右外邊距（margin-left 和 margin-right）：

<!DOCTYPE html>
<html>
    <head>
        <style>
            .center {
                margin: auto;
                width: 60%;
                border: 3px solid #73AD21;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <h2>Center Align Elements</h2>
        <p>To horizontally center a block element (like div), use margin: auto;</p>
        <div class="center">
            <p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
        </div>
    </body>
</html>

注意：如果 width 屬性沒有設置（或設置爲 100%），居中排列將沒有效果。

Center Align Text

僅對元素內的文本居中，我們可以使用 text-align: center; 。

<!DOCTYPE html>
<html>
    <head>
        <style>
            .center {
                text-align: center;
                border: 3px solid green;
            }
        </style>
    </head>
    <body>
        <h2>Center Text</h2>
        <div class="center"><p>This text is centered.</p></div>
    </body>
</html>

提示：有關更多如何居中文本的示例，請訪問 CSS Text 章節。

Center an Image

居中圖片，我們可以使用 margin: auto; 並且使它成爲 block 元素：

<!DOCTYPE html>
<html>
    <head>
        <style>
            img {
                display: block;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <h2>Center an Image</h2>
        <p>To center an image, use margin: auto; and make it into a block element:</p>
        <img src="http://www.w3schools.com/css/paris.jpg" alt="Paris" style="width: 40%">
    </body>
</html>

Left and Right Align - Using position

排列元素的方法之一是使用 position ：

<!DOCTYPE html>
<html>
    <head>
        <style>
            .right {
                position: absolute;
                right: 0px;
                width: 300px;
                border: 3px solid #73AD21;
                padding: 10px;
                margin: 10px;
            }
        </style>
    </head>
    <body>
        <h2>Right Align</h2>
        <p>An example of how to right align elements with the position property:</p>
        <div class="right">
            <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
        </div>
    </body>
</html>

注意：絕對定位的元素將不再遵從常規流（normal flow），並且它可以與元素重疊。
提示：當使用 position 進行元素排列的時候，我們通常會對 <body> 元素定義 margin 和 padding 。這是爲了避免在不同瀏覽器中的視覺差異。
然而，當使用 position 的時候，在 IE8 以及早期版本中仍存在一個問題。如果容器元素（在我們的示例 <div class="container"> 中）有指定的寬度而 !DOCTYPE 卻沒有聲明，IE8 以及早期版本的瀏覽器會對右邊距增加 17px 。這個空間大概是給滾動條預留的。因此，在使用 position 的時候要聲明 !DOCTYPE ：

body {
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    width: 100%;
}

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: #b0e0e6;
}

Left and Right Align - Using float

排列元素的另一種方法是使用 float 屬性：

.right {
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

提示：當使用 float 進行元素排列的時候，我們通常會對 <body> 元素定義 margin 和 padding 。這是爲了避免在不同瀏覽器中的視覺差異。
然而，當使用 float 的時候，在 IE8 以及早期版本中仍存在一個問題。如果容器元素（在我們的示例 <div class="container"> 中）有指定的寬度而 !DOCTYPE 卻沒有聲明，IE8 以及早期版本的瀏覽器會對右邊距增加 17px 。這個空間大概是給滾動條預留的。因此，在使用 float 的時候要聲明 !DOCTYPE ：

body {
    margin: 0;
    padding: 0;
}

.right {
    float: right;
    width: 300px;
    background-color: #b0e0e6;
}

Center Vertically - Using padding

在 CSS 中，垂直居中元素的方法有很多種，最簡單的解決方式是使用上、下內邊距（padding-top 和 padding-bottom）：

<!DOCTYPE html>
<html>
    <head>
        <style>
            .center {
                padding: 70px 0;
                border: 3px solid green;
            }
        </style>
    </head>
    <body>
        <h2>Center Vertically</h2>
        <p>In this example, we use the padding property to center the div element vertically:</p>
        <div class="center"><p>I am vertically centered.</p></div>
    </body>
</html>

垂直、水平居中元素，我們可以使用 padding 和 text-align: center：

<!DOCTYPE html>
<html>
    <head>
        <style>
            .center {
                padding: 70px 0;
                border: 3px solid green;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h2>Centering</h2>
        <p>In this example, we use padding and text-align to center the div element vertically and horizontally:</p>
        <div class="center"><p>I am vertically and horizontally centered.</p></div>
    </body>
</html>

Center Vertically - Using line-height

另一種伎倆是使 line-height 屬性與 height 屬性的值相等：

<!DOCTYPE html>
<html>
    <head>
        <style>
            .center {
                line-height: 200px;
                height: 200px;
                border: 3px solid green;
                text-align: center;
            }

            .center p {
                line-height: 1.5;
                display: inline-block;
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <h2>Centering</h2>
        <p>In this example, we use the line-height property with a value
            that is equal to the height property to center the div element:</p>
        <div class="center"><p>I am vertically and horizontally centered.</p></div>
    </body>
</html>

Center Vertically - Using position & transform

如果 padding 和 line-height不是一種選擇，第 3 種解決方式是使用定位和 transform 屬性：

<!DOCTYPE html>
<html>
    <head>
        <style>
            .center {
                height: 200px;
                position: relative;
                border: 3px solid green;
            }

            .center p {
                margin: 0;
                position: absolute;
                top: 50%;
                left: 50%;
                -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }
        </style>
    </head>
    <body>
        <h2>Centering</h2>
        <p>In this example, we use positioning and the transform property
            to vertically and horizontally center the div element:</p>
        <div class="center">
            <p>I am vertically and horizontally centered.</p>
        </div>
        <p>Note: The transform property is not supported in IE8 and earlier versions.</p>
    </body>
</html>

提示：在 2D Transforms Chapter 章節中，你將學習到更多與 transform 屬性相關的知識。

CSS 基礎（014_Align）

web前端（001_滾動效果）

CSS 基礎（020_下拉式菜單）

CSS 基礎（019_導航欄）

CSS 基礎（009_Max-width）

CSS3 基礎（005_3D 變換）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結