垂直对齐图像旁边的文本？

因为你必须将line-height设置为div的高度才能工作

你可能想要这个：

<div><img style="width:30px; height:30px;"><span style="vertical-align:50%; line-height:30px;">Didn't work.</span></div>

正如其他人所建议的，在图像上尝试vertical-align：

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

CSS并不烦人。你只是不读留档。； P

实际上，在这种情况下，它非常简单：将垂直对齐应用于图像。由于它都在一行中，因此它实际上是您想要对齐的图像，而不是文本。

<!-- moved "vertical-align:middle" style from span to img --><div><img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60"><span style="">Works.</span></div>

在FF3中测试。

现在您可以将flexbox用于这种类型的布局。

.box {display: flex;align-items:center;}

<div class="box"><img src="https://via.placeholder.com/60x60"><span style="">Works.</span></div>

以下是一些简单的垂直对齐技术：

单线垂直对齐：中间

这个很简单：设置文本元素的line-高度等于容器的高度

<div><img style="width:30px; height:30px;"><span style="line-height:30px;">Doesn't work.</span></div>

多线垂直对齐：底部

相对于其容器绝对定位一个内部div

<div style="position:relative;width:30px;height:60px;"><div style="position:absolute;bottom:0">This is positioned on the bottom</div></div>

多线垂直对齐：中间

<div style="display:table;width:30px;height:60px;"><div style="display:table-cell;height:30px;">This is positioned in the middle</div></div>

如果您必须支持旧版本的IE<=7

为了让这个全面正确工作，你必须稍微破解一下CSS。幸运的是，有一个对我们有利的IEbug。在容器上设置top:50%，在内部div上设置top:-50%，你可以获得相同的结果。我们可以使用IE不支持的另一个功能将两者结合起来：高级CSS选择器。

<style type="text/css">#container {width: 30px;height: 60px;position: relative;}#wrapper > #container {display: table;position: static;}#container div {position: absolute;top: 50%;}#container div div {position: relative;top: -50%;}#container > div {display: table-cell;vertical-align: middle;position: static;}</style>
<div id="wrapper"><div id="container"><div><div><p>Works in everything!</p></div></div></div></div>

可变容器高度垂直对齐：中间

此解决方案需要比其他解决方案稍微更现代的浏览器，因为它使用了transform: translateY属性。（http://caniuse.com/#feat=transforms2d）

将以下3行CSS应用于元素将使其垂直居中于其父元素内，而不管父元素的高度如何：

position: relative;top: 50%;transform: translateY(-50%);

为了记录，对齐“命令”不应该在SPAN上工作，因为它是在线标记，而不是块级标记。对齐、边距、填充等在内联标记上不起作用，因为内联的目的不是扰乱文本流。

CSS将超文本标记语言分为两类：内联和块级。搜索“css block vs inline”，会出现一篇很棒的文章…

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

（了解核心CSS原则是它不那么烦人的关键）

基本上，你必须下到CSS3。

-moz-box-align: center;-webkit-box-align: center;

您可以做的另一件事是将文本的line-height设置为<div>中图像的大小。然后将图像设置为vertical-align: middle;

这真的是最简单的方法。

background:url(../images/red_bullet.jpg) left 3px no-repeat;

我通常使用3px代替top。通过增加/减少该值，可以将图像更改为所需的高度。

此代码适用于IE和FF：

<div><img style="width:auto; height:auto;vertical-align: middle;"><span>It does work on all browsers</span></div>

例如，在jQuery Mobile中的一个按钮上，您可以通过将此样式应用于图像来稍微调整它：

.btn-image {vertical-align:middle;margin:0 0 3px 0;}

使用line-height:30px作为跨度，使文本与图像对齐：

<div><img style="width:30px; height:30px;"><span style="line-height:30px;">Doesn't work.</span></div>

接受的答案中使用的技术仅适用于单行文本（demo），但不适用于多行文本（demo）-如上所述。

如果有人需要将多行文本垂直居中到图像，这里有几种方法（方法1和方法2受这篇CSS-Tricks文章启发）

方法caniuse：CSS表（文件）（IE8+（caniuse））

css：

div {display: table;}span {vertical-align: middle;display: table-cell;}

方法#2：容器上的伪元素（文件）（IE8+）

css：

div {height: 200px; /* height of image */}
div:before {content: '';display: inline-block;height: 100%;vertical-align: middle;margin-right: -0.25em; /* Adjusts for spacing */}
img {position: absolute;}
span {display: inline-block;vertical-align: middle;margin-left: 200px;  /* width of image */}

方法#3：Flexbox（文件）（caniuse）

css（上面的小提琴包含供应商前缀）：

div {display: flex;align-items: center;}img {min-width: 200px; /* width of image */}

多线解决方案：

<div style="display:table;width:30px;height:160px;"><img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' /><div style="display:table-cell;height:30px;vertical-align:middle">Multiline text centered vertically</div></div><!-- note: img (height + 2x padding) must be equal to root div height -->

适用于所有浏览器和ie9+

将div更改为flex容器：

div { display: flex; }

方法一：

div { align-items: center; }

演示

方法二：

div * { margin: auto 0; }

演示

在img上尝试不同的宽度和高度值，在span上尝试不同的字体大小值，您会看到它们始终保持在容器的中间。

您必须将vertical-align: middle应用于两个元素才能使其完美居中。

<div><img style="vertical-align:middle" src="http://lorempixel.com/60/60/"><span style="vertical-align:middle">Perfectly centered</span></div>

接受的答案确实将图标放在旁边文本x高度的一半左右（如css规范中定义的）。这可能足够好，但如果文本的上升或下降部分在顶部或底部突出，可能会看起来有点不对劲：

在左侧，文本未对齐，在右侧，如上所示。可以在此关于verline-的文章中找到实时演示。

有没有人讨论过为什么#0在场景中起作用？问题中的图像可能比文本高，因此定义了行框的上边缘。vertical-align: top在跨度元素上，然后将其定位在行框的顶部。

vertical-align: middle和top之间行为的主要区别在于，第一个相对于盒子的基线移动元素（它被放置在任何需要完成所有垂直对齐的地方，因此感觉相当于不可预测），第二个相对于线框的外部边界（这更有形）。

在这些答案中还没有看到margin的解决方案，所以这是我对这个问题的解决方案。

此解决方案仅适用于知道图像宽度的情况。

超文本标记语言

<div><img src="https://placehold.it/80x80"><span>This is my very long text what should align. This is my very long text what should align.</span></div>

的css

div {overflow:hidden;}img {width:80pxmargin-right:20px;display:inline-block;vertical-align:middle;}span {width:100%;margin-right:-100px;padding-right:100px;display:inline-block;vertical-align:middle;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}

编写这些跨度属性

span{display:inline-block;vertical-align:middle;}

使用display:inline-block;当你使用vertical-align属性时。那些是相关属性

您可以使用display属性将图像设置为inline element

<div><img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60"><span style="vertical-align: middle; display: inline;">Works.</span></div>

首先，根本不推荐内联CSS，它真的会弄乱你的超文本标记语言。

要对齐图像和跨度，您可以简单地执行vertical-align:middle。

.align-middle {vertical-align: middle;}

<div><img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png"><span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span></div>

我同意，这可能会令人困惑。尝试利用表格功能。我使用这个简单的CSS技巧将模态定位在网页的中心。它有很大的浏览器支持：

<div class="table"><div class="cell"><img src="..." alt="..." /><span>It works now</span></div></div>

和CSS部分：

.table { display: table; }.cell { display: table-cell; vertical-align: middle; }

请注意，您必须设置图像和表格容器的样式并调整其大小，以使其按照您的意愿工作。

不知道为什么它不呈现它在您的导航的浏览器，但我通常使用这样的片段时，试图显示一个标题与图像和水平居中，希望它有帮助！

https://output.jsbin.com/jeqorahupo

            <hgroup style="display:block; text-align:center;  vertical-align:middle;  margin:inherit auto; padding:inherit auto; max-height:inherit">
<header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">
<image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>http://lipsum.org</header></hgroup>

<!DOCTYPE html><html><head><style>.block-system-branding-block {flex: 0 1 40%;}@media screen and (min-width: 48em) {.block-system-branding-block {flex: 0 1 420px;margin: 2.5rem 0;text-align: left;}}.flex-containerrow {display: flex;}.flex-containerrow > div {justify-content: center;align-items: center;}.flex-containercolumn {display: flex;flex-direction: column;}.flex-containercolumn > div {width: 300px;margin: 10px;text-align: left;line-height: 20px;font-size: 16px;}.flex-containercolumn  > site-slogan {font-size: 12px;}.flex-containercolumn > div > span{ font-size: 12px;}</style></head><body><div id="block-umami-branding" class="block-system block-system-branding-block"><div class="flex-containerrow"><div><a href="/" rel="home" class="site-logo"><img src="https://placehold.it/120x120" alt="Home"></a></div><div class="flex-containerrow"><div class="flex-containercolumn"><div class="site-name "><a href="/" title="Home" rel="home">This is my sitename</a></div><div class="site-slogan "><span>Department of Test | Ministry of Test |TGoII</span></div></div></div></div></div></body></html>

在css中使用#0。

如果您想通过使用#1使用in flex水平对齐文本，请使用#0使用in flex垂直居中对齐文本。

div{display: flex;align-items: center;}

<div><img src="http://lorempixel.com/30/30/" alt="small img" /><span>It works.</span></div>

在css中使用#0。

div{display: table;}div *{display: table-cell;vertical-align: middle;}

<div><img src="http://lorempixel.com/30/30/" alt="small img" /><span>It works.</span></div>

使用align-items: center;显示flex是垂直对齐项目的最佳方式

div {display: flex;align-items: center;}

<div><img src="https://via.placeholder.com/30" alt="small img" /><span>it works.</span></div>

在2022年和近96%的无前缀浏览器支持中，我很惊讶没有人建议使用grid布局。

在这个jsfiddle中，3行是实现OP目标所必需的全部（但提供了多个对齐以供比较）：

div {display: grid;grid-template-columns: min-content max-content;align-items: center}

一个额外的UI细节将包括gap属性的可选使用，它允许调制父网格容器（div）中每个网格项之间的空间。

grid布局的优点

1. 易于垂直和水平对齐网格项目
2. 网格项之间的空间调制
3. 任何大小的图像（使用min-content）和文本长度（使用max-content的一行或使用min-content的包装（未在小提琴中显示））都可以-无需在CSS中硬编码图像尺寸（两种用法都在JSFiddle中演示）
4. 现代方法

grid布局的缺点

1. 较旧的浏览器支持更具挑战性
2. 网格布局通常需要更有经验的开发人员才能正确实现-不像block/inline-block显示那么简单