如何在浮动的图片旁边垂直对齐文本?[英] how to vertically align text next to a floated image?

本文是小编为大家收集整理的关于如何在浮动的图片旁边垂直对齐文本?的处理方法,想解了如何在浮动的图片旁边垂直对齐文本?的问题怎么解决?如何在浮动的图片旁边垂直对齐文本?问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

我想在浮动图像后垂直对齐跨度. 我在堆栈溢出中搜索了它,并找到这篇文章.但是我的图像是漂浮的.

<div>
    <img style="width:30px;height:30px; float:left">
    <span style="vertical-align:middle">Doesn't work.</span>
</div>

我给出vertical-align:middle对图像而没有任何变化!

谢谢

推荐答案

首先从中删除float.这样写:

<img style="width:30px;height:30px;vertical-align:middle" src="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg">
    <span>Doesn't work.</span>

检查此 http://jsfiddle.net/ws3uf/

其他推荐答案

即使这是一个非常古老的帖子,您也可以使用Flexbox来实现此目标:

div {
 display: flex;
 align-items: center;
}
<div>
<img style="width:30px;height:30px;" src="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg" />
<span>Doesn't work.</span>
</div>

jsfiddle示例

其他推荐答案

add line-height(等于图片高度):

<div>
    <img style="width:30px;height:30px; float:left">
    <span style="vertical-align:middle; line-height: 30px;">Works!</span>
</div>

见example.

本文地址:https://www.itbaoku.cn/post/572037.html