Div标签里放img和span标签实现垂直水平居中-Toy模板网

这篇具有很好参考价值的文章主要介绍了Div标签里放img和span标签实现垂直水平居中。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

正常默认布局

代码实现：

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

效果图如下：

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

我们首先实现 span标签的文字在图片旁边垂直居中，这里有两种方法实现

方法一：在只考虑span文字在图片旁边垂直居中时推荐使用

给img和span标签的css样式都加上vertical-align: middle

代码实现：

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

效果图如下：

方法二：利用flex布局（在考虑二者整体还要在div中水平垂直居中时推荐使用）

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>

效果图如下：

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

进一步如果要实现img和span整体在div垂直水平居中就利用flex布局比较好

1.给div开启弹性盒子(上面采用的方法二则忽略这步)：在div的样式中加上 display:flex;

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

3.实现整体垂直居中：在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>

效果图如下：

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