【element】中el-row如何使内容垂直居中

最新推荐文章于 2024-07-18 13:51:28 发布

年轻的狼

最新推荐文章于 2024-07-18 13:51:28 发布

阅读量3.5w

点赞数 28

分类专栏：前端文章标签： html flex elementui

本文链接：https://blog.csdn.net/weixin_43575040/article/details/111567249

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近开始重新接触学习element-ui，在做登录画面时需要做一个元素垂直居中的效果，官方文档提供的属性，却”没能“达成我想做的效果，于是决心彻底搞明白栅格系统的原理。

解决方案

解决方案放在最前面😂，原谅我套娃行为。

查阅官方文档，只需要在el-row中设置属性align为middle即可

这是我找到这位老哥的博客
在这里插入图片描述

本来问题到这里就应该结束了，可是我也看官方文档了啊，为社么没有效果呢，看了下评论真的时给我逗乐了hhhh。
在这里插入图片描述
其实，我心里的那句话和这位不知名的老哥时一样的。试了各种姿势了还是没有效果，不过也只是因为困扰太久没有解决问题憋在心里的火气吧。😆那到底时因为什么没有效果了呢？

一、分析

首先看下我没有实现前的效果
这是没实现前的效果
这里先用红蓝两个色块代替我想放置到垂直居中的元素，我理想的位置应该时黄x的位置啊。

<body>
    <el-container class="outer" id="app">
        <el-main>
            <el-row type="flex" justify="center" align="middle">
                <div style="background-color: blue;width: 100px;height: 100px;color: #fff;">A</div>
                <div style="background-color: red;width: 100px;height: 100px;color: #fff">B</div>
            </el-row>
        </el-main>
    </el-container>
</body>
<style>
    body, html{
        margin: 0px;
        padding: 0px;
        height: 100%;
        width: 100%;
    }
    .el-main {
        height: 100%;
    }
    .outer {
        background-color: #DCDFE6;
        height: 100%;
        width: 100%;
    }
</style>

这里已经设置了，align属性可是效果却没有实现。前端惯例先F12
这是外层的el-main:
在这里插入图片描述
这是el-row：

我的意识里，align这个属性就应当让让row位于main的中央。那回事属性冲突导致样式没有生效吗？

查看样式发现，样式已生效并没有冲突。但是这两条属性却有些陌生，他们具体实现的效果是什么样的呢，要想了解这两条属性，就要先了解什么是：

弹性布局 display：flex；

这才是本文的重点----好墨迹。

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

* 详细讲解

菜鸟教程-Flex 布局语法教程

搞懂这个一切就很明了啦，说的也很详细易懂，赞👍。

问题原因

在我上面的代码中，el-row元素才是真正flex布局的容器，而我el-row高度没有设置默认为auto被色块撑起来的，已经没有多余的上下空间，自然也就没有效果。所以要做的就是给el-row高度100%

二、解决方案

代码:

<body>
    <el-container class="outer" id="app">
        <el-main>
            <el-row type="flex" justify="center" align="middle">
                <div style="background-color: blue;width: 100px;height: 100px;color: #fff;">A</div>
                <div style="background-color: red;width: 100px;height: 100px;color: #fff">B</div>
            </el-row>
        </el-main>
    </el-container>
</body>
<style>
    body, html{
        margin: 0px;
        padding: 0px;
        height: 100%;
        width: 100%;
    }
    .el-main {
        height: 100%;
    }
    .el-row {
        height: 100%; # 这里
    }
    .outer {
        background-color: #DCDFE6;
        height: 100%;
        width: 100%;
    }
</style>