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

解决办法

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-menubackground-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>

效果图:输入框和导航栏实现了垂直居中对齐

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

element UI 修改 table 中某一列的值
(1)el-table 中增加 :cell-style 属性 <el-table:cell-style="columnStyle":default-sort="{p ...
Element UI下拉列表el-option中的key、value、label含义
Element UI下拉列表el-option中的key.value.label含义 <el-form :model="queryParams" ref="quer ...
vue element ui合并表格（合并某列的行数据）
需求:按需合并某些列的数据自定义数据: tableData:[ { num:0, new_subject_name:"new_subject_name1", count1:&qu ...
二次封装Element Ui的Table中使用render渲染函数
render函数的使用 render在element UI中的使用 render函数是什么具体参数用法 render在element UI中的使用 {prop: 'button',label: '操 ...
element ui背景图_vue+element-ui如何为元素设置背景图片
在元素标签里,直接: style="background-image:url('1.jpg')"//图片路径是不能显示图片的. 也不能直接background...,就是说不通过 ...
在flex布局中，一行中的最后一个元素靠最右边放
Flex 中使用 justify-content, 规定项目之间的对其方法,如果要让最后一项向右边对齐,如下图: 有一个简单的方法,在最后一项元素使用样式: margin-left: auto;
php和ui,php项目中使用element.ui和vue
1.plugins中添加axios,element-ui 2.全局文件下引入 3.页面内使用 1) 容器需要增加id属性 2) 添加script标签,创造vue组件 var app = new Vue ...
element ui el-table单元格按需合并
从来没有好好地有条理的整理过代码,也是因为没有信心能写好,今天心血来潮写一篇尝试一下. 问题描述 element ui 中 el-table 按需合并单元格本文中代码举例,根据 project_na ...
element ui 日历空控件添加农历节气和家假日
背景: 按照客户需求,需要在日历控件上添加农历和节气 ,但是element ui控件中无弄里控件只能引入外部js来完成该功能, 1.引入calendar.js 2.调用方法显示农历 2.1 // 公 ...

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

解决办法

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

最新文章

热门文章