Div标签里放img和span标签实现垂直水平居中--flex布局

正常默认布局

代码实现：

<div style="width: 400px; height:400px; background-color:blueviolet">
        <img style="width: 80px; height: 80px;" src="./picture.png">
        <span style="color:white;">我是span标签</span>
</div>

效果图如下： 

实现 span标签的文字在图片旁边垂直居中

1.先给div设置开启弹性布局。display:flex;

2.再把span标签的行高设置成与图片img等高，例如我的图片height:80px;就给span设置行高line-height:80px;

代码实现：

<div style="display: flex; width: 400px; height:400px; background-color:blueviolet">
        <img style="width: 80px; height: 80px;" src="./picture.png">
        <span style="line-height: 80px; color:white;">我是span标签</span>
</div>

效果图如下：

 实现img和span整体在div垂直水平居中

1.实现整体水平居中：在div的样式中加上 justify-content: center;

2.实现整体垂直居中：在div的样式中加上 align-items: center;

代码实现： 

<div style="display: flex;justify-content: center;align-items: center; width: 400px; height:400px; background-color:blueviolet">
        <img style="width: 80px; height: 80px;" src="./picture.png">
        <span style="line-height: 80px; color:white;">我是span标签</span>
</div>

 效果图如下：

 这样就大功告成啦！！！