Div标签里放img和span标签实现垂直水平居中(img标签铺满div)

发布时间：2024-01-13

Div标签里放img和span标签实现垂直水平居中正常默认布局

推荐整理分享Div标签里放img和span标签实现垂直水平居中(img标签铺满div)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:div 标签,div标签图片,div标签图片,div标签html,div和img标签有一道间隙,div和img标签有一道间隙,div标签放在哪儿,div和img标签有一道间隙,内容如对您有帮助，希望把文章链接给更多的朋友！

代码实现：

<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标签的文字在图片旁边垂直居中，这里有两种方法实现方法一：在只考虑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>

效果图如下：

进一步如果要实现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>

效果图如下：

这样就大功告成啦！！！

本文链接地址:https://www.jiuchutong.com/zhishi/294486.html 转载请保留说明！

上一篇：Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本（登录注册页面，验证码）(vuecli项目实战)

下一篇：合宙AIR32F103CBT6刷回CMSIS-DAP固件和DAP升级固件以及刷ST-LINK V2-1固件方法(合宙air32f103 stlink)