1)先上效果图
image.png
2)代码块
<template>
<div class="home">
<div class="header">
<div class="left">
<van-icon name="smile-o" size="34" />
</div>
<div class="center">
<span class="iconfont iconsearch"></span>
<span class="text">搜索物料</span>
</div>
<div class="right">
<span class="iconfont iconwode"></span>
</div>
</div>
</div>
</template>
<script>
</script>
<style lang="less" scoped>
.header{
height: 50px;
line-height: 50px;
background-color: red;
color: white;
display: flex;
padding-left: 10px;
align-items:center;//垂直居中布局
.left,.right{
width: 60px;
height: 50px;
line-height: 50px;
text-align: center;
}
.left{
padding-top: 18px;
}
.center{
flex: 1;
height: 34px;
line-height: 34px;
background-color: rgba(255,255,255,0.5);
text-align: center;
border-radius: 17px;
.text{
font-size: 16px;
}
}
.iconwode{
font-size: 24px;
}
.iconnew{
font-size: 50px;
}
}
</style>
总结
1.采用flex布局,让三个div垂直居中布局。
2.希望此教程可以帮助到你们。❤❤❤
