CSS垂直對齊

一、什麼是CSS垂直對齊

CSS（Cascading Style Sheets）是一種樣式表語言，用於描述網頁上的元素應該如何展現。垂直對齊是CSS其中一項功能，用於調整元素在垂直方向上的對齊方式。

在網頁設計中，往往需要將文字和圖片、塊級元素和文字、塊級元素之間的距離進行調整。垂直對齊功能就能夠幫助我們做到這一點。

二、如何實現CSS垂直對齊

實現CSS垂直對齊可以使用以下幾種方法：

1、使用vertical-align屬性

vertical-align屬性用於設置元素的垂直對齊方式。可以應用於行內元素、表格單元格以及表格行：

    
    .text {
        display: inline-block;
        vertical-align: middle;
    }
    .image {
        display: inline-block;
        vertical-align: middle;
    }
    

使用這種方法，將元素設置為inline-block後，再通過vertical-align屬性設置垂直對齊方式為middle，即可使元素在垂直方向上居中對齊。

2、使用flexbox布局

flexbox布局是CSS3新增的一種布局模式，可用於對齊和分佈行內元素、塊級元素、以及它們的內容。可以通過設置justify-content屬性來設置主軸方向上的對齊方式，設置align-items屬性來設置交叉軸方向上的對齊方式：

    
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    

使用這種方法，將元素的父元素設置為flex容器，再通過justify-content屬性設置主軸方向上的對齊方式為center，通過align-items屬性設置交叉軸方向上的對齊方式為center，即可使元素在垂直方向上居中對齊。

3、使用grid布局

grid布局是CSS3新增的一種布局模式，可用於對齊和分佈行內元素、塊級元素、以及它們的內容。可以通過設置justify-items屬性來設置主軸方向上的對齊方式，設置align-items屬性來設置交叉軸方向上的對齊方式：

    
    .container {
        display: grid;
        justify-items: center;
        align-items: center;
    }
    

使用這種方法，將元素的父元素設置為grid容器，再通過justify-items屬性設置主軸方向上的對齊方式為center，通過align-items屬性設置交叉軸方向上的對齊方式為center，即可使元素在垂直方向上居中對齊。

三、總結

CSS垂直對齊是網頁設計中經常使用的一項功能，有多種實現方式。通過設置vertical-align、flexbox、grid等屬性，可以輕鬆實現垂直對齊。