在图像旁边垂直对齐文字？

我同意，这可能会造成混淆。尝试利用表格功能。我使用这个简单的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; }

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

例如，在jQuery mobile的按钮上，您可以通过将以下样式应用于图片来对其进行一些调整：

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

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

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

写下这些跨度属性

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

使用display:inline-block;当您使用vertical-alignproperty.Those的产生密切相关性

有没有看到一个解决方案margin在回答这些问题的呢，所以这里是我的解决这个问题。

仅当您知道图像的宽度时，此解决方案才有效。

HTML

<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:80px
   margin-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上不起作用，因为它是行内标签，而不是块级标签。诸如对齐，边距，填充等之类的内容在行内标签上不起作用，因为行内点不是要打乱文本流。

CSS将HTML标签分为两组：内联和块级。搜索“ css块与内联”，然后出现一篇很棒的文章...

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

（了解CSS的核心原理是使其不那么令人讨厌的关键）

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

这是最简单的方法。

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

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

因为您必须line-height将div的高度设置为有效

基本上，您必须开始使用CSS3。

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

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

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://placehold.it/60x60">
  <span style="">Works.</span>
</div>

在FF3中测试。

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

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

<div class="box">
    <img src="https://placehold.it/60x60">
    <span style="">Works.</span>
</div>

You have to apply vertical-align: middle to both elements to have it been centered perfectly.

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

The accepted answer does center the icon around half of the x-height of the text next to it (as defined in the CSS specs). Which might be good enough but can look a little bit off, if the text has ascenders or descenders standing out just at top or bottom:

左边的文本未对齐，右边的文本如上所示。可以在本文中找到有关vertical-align的实时演示。

有人谈论过为什么vertical-align: top在这种情况下可行吗？问题中的图像可能比文本高，因此定义了线框的顶部边缘。vertical-align: top然后将其放在span元素上，然后将其放在行框的顶部。

vertical-align: middle和之间的主要区别top是，第一个相对于框的基线（放置在需要完成所有垂直对齐的位置，因此感觉很难预测）相对于基线移动元素，第二个相对于线框的外部边界（即更明显）。

这段代码可在IE和FF中使用：

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

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

如果有人需要将多行文本垂直居中放置图像，可以采用以下几种方法（此CSS-Tricks文章启发了方法1和2 ）

方法＃1：CSS表（FIDDLE）（IE8 +（caniuse））

CSS：

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

方法2：容器上的伪元素（FIDDLE）（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（FIDDLE）（caniuse）

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

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

将您更改div为flex容器：

div { display:flex; }

现在有两种方法可以使所有内容的对齐方式居中：

方法1：

div { align-items:center; }

演示

方法2：

div * { margin-top:auto; margin-bottom:auto; }

演示

在上尝试使用不同的width和height值，img并在上尝试使用不同的字体大小值span，您会发现它们始终保留在容器的中间。