HTML頁面中設置同行元素垂直居中

時間 2020-08-11

標籤 html 頁面設置同行元素垂直居中欄目 HTML 简体版

原文原文鏈接

Using Flexbox to set vertical centre easily

當咱們用CSS設置HTML頁面佈局的時候，常常會遇到須要將若干Elements水平或者垂直對齊的狀況。css

對我來講，水平對齊還比較容易處理，可是垂直對齊，尤爲是在浮動float佈局上將同一行的不一樣高度的元素垂直居中排列，經常讓我頭疼不已。html

若是你尚未被這樣的痛苦折磨過，那麼你很幸運，由於如今有了更簡單和有效的辦法，那就是Flexbox (Flex Layout)。web

爲了和以前的實現方式對比，我列出了三種方案，分別是Flexbox，inline-block，float。三種方式的難易程度和效果你們能夠作一個比較。less

Solution 1: Flexbox & align-items

使用Flexbox很是簡單，只須要將須要垂直對齊的Elements（如上圖中的div-A和div-B）放到一個容器container中（如上圖的藍色邊框），將container的display屬性設爲「flex」，align-items設爲「center」就能夠了：佈局

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

頁面效果以下圖所示，不一樣高度的圖片和文字完美的在container中垂直居中對齊了：flex

Flexbox對responsive webpage的支持也很是好，只要將「flex-wrap: wrap」加到container的樣式中，頁面縮小時Flexbox的元素會自動換行，不需額外設置breakpoint來控制：spa

完整HTML及CSS代碼以下：code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Flex Layout</title>
    <style type="text/css">
    /* Solution 1: Flex box & align-items */
        .container {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }
        .item1, .item2 {
            margin: 0 auto;
        }
    
    /* Styles for both solutions */
        .container {
            width: 80%;
            height: 250px;
            margin: 50px auto;
            border: 8px solid lightblue;
        }
        .item1 img {
            width: 300px;
        }
        /* Define the img width when the screen is less than 421px */
        @media screen and (max-width: 420px) {
            .item1 img {
                width: 100%;
            }
        }
        /* Define the container width when the screen is bigger than 1000px */
        @media screen and (min-width: 1000px) {
            .container {
                width: 784px;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="item1"><img src="img/cat.jpg" /></div>
    <h3 class="item2">Momo the CAT</h3>
</div>
</body>
</html>

Solution 2: Inline-block & vertical-align

第二種方案，咱們用inline-block來實現。htm

/* Solution 2: Inline-block & vertical-align */

   .container {
       text-align: center;
       padding-top: 70px;
   }
   .item1, .item2 {
       display: inline-block;
       vertical-align: middle;
   }
   .item1 {
       width: 50%;
   }
   .item2 {
       width: 45%;
   }

將同行元素item1和item2的display屬性設爲"inline-block"，再把vertical-align設爲"middle"。blog

看到這裏你也許會以爲這也不麻煩呀，爲何說Flexbox更好呢？若是僅僅設置了這兩個屬性，你會發現item1和item2僅僅是本身居中對齊了，他們並無在container中居於垂直居中的位置。

以下圖所示：

爲了讓container中的元素垂直居中，不一樣於Solution1，咱們須要作一些額外的設置，如container的padding-top，item一、item2的具體寬度（詳見Solution2 CSS代碼）。

當頁面在窄屏Device上顯示時，還須要設置更多的breakpoint取消inline-block、調整padding-top、寬度設置等等，不然頁面會出現各類問題。例如重疊、再也不垂直居中等：

當你的頁面上有幾10、上百個相關元素須要調整時，這絕對不會是個愉快的過程。

Solution 3: Float

爲了垂直居中而採起浮動佈局是很是不推薦的作法。

咱們都知道浮動框會引起總體佈局的不穩定，若是每次用完浮動都加一些空白標籤去清除浮動的話又會給頁面帶來過多的冗餘代碼。

退一步講，浮動只是能讓item1和item2同行顯示，爲了讓其垂直居中對齊，只能經過調整margin、padding或者調整relative的位置。當頁面尺寸改變時，爲了達到responsive的效果又須要更多的工做。

Float實現的CSS代碼以下，僅供比較參考，不推薦使用:

/* Solution 3: Float */
.container {
    padding: 50px 15px;
    height: 172px;
}
.item1 {
    float: left;
}
h3 {
    float: right;
    margin: 4em 3em 0 0;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。