Element-ui的⼀⾏中的每个列元素垂直居中对齐解决办法
1.在el-row标签中启⽤ flex 布局, 即type=“flex”
2.同时在el-row标签设置样式style=“align-items: center”
<el-header >
<el-row type="flex"justify="space-around">
<el-col :span="4">
<el-input v-model="text1"placeholder="请输⼊内容">
<el-select v-model="text2"slot="prepend"placeholder="请选择">flex布局对齐方式
<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="">⾸页</a></el-menu-item>
<el-menu-item index="2"><a href="">课程</a></el-menu-item>
<el-menu-item index="3"><a href="">名师</a></el-menu-item>
<el-menu-item index="4"><a href="">问答</a></el-menu-item>
</el-menu>
</el-col>
</el-row>
</el-header>
效果图：输⼊框和导航栏实现了垂直居中对齐

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。