Element-ui的一行中的每个列元素垂直居中对齐

最新推荐文章于 2025-05-01 20:32:33 发布

鸣鼓ming

最新推荐文章于 2025-05-01 20:32:33 发布

阅读量1w

点赞数 6

分类专栏：前端开发问题解决文章标签： html css html5

本文链接：https://blog.youkuaiyun.com/qq_41865229/article/details/118899097

版权

前端开发问题解决专栏收录该内容

4 篇文章

订阅专栏

本文通过示例代码展示了如何在 Element UI 的布局组件中启用 Flex 布局，结合 `align-items:center` 样式实现 `el-header` 内容的垂直居中对齐。内容包括 `el-row`、`el-col`、`el-input`、`el-select`、`el-button` 和 `el-menu` 的使用，以及如何通过 `justify` 和 `align` 属性调整元素的排列方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决办法

1.在el-row标签中启用 flex 布局, 即type=“flex”
2.同时在el-row标签设置样式style=“align-items: center”

 <el-header style="background-color: #47494E">
        <el-row type="flex" justify="space-around" style="align-items: center">
          <el-col :span="4">
            <el-input v-model="text1" placeholder="请输入内容" >
              <el-select v-model="text2" slot="prepend" placeholder="请选择">
                <el-option label="餐厅名" value="1"></el-option>
                <el-option label="订单号" value="2"></el-option>
                <el-option label="用户电话" value="3"></el-option>
              </el-select>
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-col>
          <el-col :span="4"  type="flex" align="center">
            <el-menu
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
              default-active="1"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect">
              <el-menu-item index="1"><a href="https://www.ele.me">首页</a></el-menu-item>
              <el-menu-item index="2"><a href="https://www.ele.me">课程</a></el-menu-item>
              <el-menu-item index="3"><a href="https://www.ele.me">名师</a></el-menu-item>
              <el-menu-item index="4"><a href="https://www.ele.me">问答</a></el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </el-header>