【实战经验】css实现单行图片与文字垂直居中

洪七公 · 发表于 2023-3-31 13:00:54

首先看下div内图片和文字同时插入的一般代码：

<div>
<div style="float:left"><img src="./koala.jpg" width="100px"/>11111111111</div>
<div style="float:left"><img src="./koala.jpg" width="100px"/>22222222222</div>
</div>

复制代码

看下效果：

是不是你遇到的也是同样的问题？是不是想得到下面的效果：

解决办法：

有人可能知道要添加vertical-align:middle;属性，但是为什么不行呢，这是因为不能直接在div中添加vertical-align:middle;属性，<div>、<span>这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。所以我们要在img元素上添加！

上述效果的源代码如下：

<div>
<div style="float:left"><img src="./koala.jpg" style="vertical-align:middle;" width="100px"/>11111111111</div>
<div style="float:left"><img src="./koala.jpg" style="vertical-align:middle;" width="100px"/>22222222222</div>
</div>

复制代码

如果div已经有了class样式，那么也可以这么写：

代码：

<div>
<div class="vertical-align"><img src="./koala.jpg" style="vertical-align:middle;" width="100px"/>11111111111</div>
<div class="vertical-align"><img src="./koala.jpg" style="vertical-align:middle;" width="100px"/>22222222222</div>
</div>

复制代码

css：
.vertical-align img{vertical-align:middle;}

能理解了不，好了，以上就是锦尚中国源码论坛关于css实现单行图片与文字垂直居中的解决办法，非常感谢大家对锦尚中国的支持与厚爱，获取更多资源与素材可以搜索锦尚中国获取！

		自动登录	找回密码
密码			会员注册

[CSS/Html] 【实战经验】css实现单行图片与文字垂直居中

浏览过的版块