css实现图⽚与⽂字⽔平对齐
1、功能说明
图⽚与⽂字⽔平对齐是经常遇到的场景,若使⽤普通inline或者inline-block布局⽅式,往往需要通过调整边距来实现图⽚⽂字⽔平对齐,下⾯我们通过flex布局实现下图功能:
2、功能实现
实现该功能其实就是flex布局的应⽤,使⽤flex布局的***align-item***属性即可,该属性说明如下:
align-items属性定义项⽬在交叉轴上如何对齐,取值如下:
flex-start: 左上对齐
flex-end :左下对齐html的flex布局
center :中间对齐
stretch:未设⾼度时占满容器⾼度
baseline:盒⼦内第⼀⾏⽂字基线对齐
这⾥我们实现⽔平对齐功能使⽤的的属性是***align-items:center ;***代码如下:
// html
<div class="three-img">
<div>
<img :src="require('@/assets/images/imgRowAlign/image .png')"/>
<span>我是图⽚</span>
</div>
<div>
<img :src="require('@/assets/images/imgRowAlign/image .png')"/>
<span>我是图⽚</span>
</div>
<div>
<img :src="require('@/assets/images/imgRowAlign/image .png')"/>
<span>我是图⽚</span>
</div>
</div>
// css
<style lang="scss"scoped>
.three-img{
margin-top: 40px;
display: flex;
justify-content: space-around;
font-size: 18px;
div{
display: flex;
justify-content: flex-start;
align-items: center;
}
img{
width: 20px;
height: 20px;
}
span{
margin-left: 5px;
}
}
</style>
若要实现⽂字与图⽚底部对齐,使⽤**align-items:flex-end;**即可,
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论