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;
}