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

接受的答案中使用的技术仅适用于单行文本 (demo)，而不适用于多行文本 (demo) - 如那里所述。

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

方法 #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 */
}

此代码适用于 IE 和 FF：

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

因为您必须将 line-height 设置为 div 的高度才能使其正常工作

作为记录，对齐“命令”不应该在 SPAN 上工作，因为它是一个内联标签，而不是一个块级标签。对齐、边距、填充等内容不适用于内联标签，因为内联点不会破坏文本流。

CSS 将 HTML 标签分为两组：内联和块级。搜索“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:30px 作为跨度，使文本与图像对齐：

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

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

这真的是最简单的方法。

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

This solution 仅在您知道图片宽度的情况下才有效。

的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{
    display:inline-block;
    vertical-align:middle;
}

使用 display:inline-block; 时使用 vertical-align 属性。这些是关联属性

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

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

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

作品。

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

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

多线解决方案：

http://jsfiddle.net/zH58L/6/

<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+

在 css 中使用 flex 属性。

在 flex 中使用 align-items:center 使文本垂直居中对齐；如果你想通过在 flex 中使用 justify-content:center; 将文本水平居中对齐。

div {显示：弹性；对齐项目：居中； }

有效。

在 css 中使用表格单元格。

div {显示：表； } 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; }

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

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

div {显示：弹性；对齐项目：居中； }

它有效。

div {显示：弹性；对齐项目：居中； }

有效。

首先，完全不推荐内联 CSS，它真的会弄乱你的 HTML。

要对齐图像和跨度，您只需执行 vertical-align:middle。

.align-middle { 垂直对齐：中间； }

我在中间图片！感谢 CSS！万岁！

不知道为什么它不会在您的导航浏览器上呈现它，但我通常在尝试显示带有图像和居中文本的标题时使用这样的片段，希望它有所帮助！

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>

在 2022 年和 nearly 96% unprefixed browser support 中，我很惊讶没有人建议使用 grid 布局。

在 this JSFiddle 中，3 行是实现 OP 目标所必需的（但提供了多个对齐方式以供比较）：

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

一个额外的 UI 细节包括可选使用 gap 属性，它可以调制父 grid container (div) 中每个 grid-item 之间的空间。

grid 布局的优点

网格项目的简单垂直和水平对齐调整网格项目之间的空间任何大小的图像（使用最小内容）和文本长度（使用最大内容的一行或使用最小内容的包裹（未在小提琴中显示））都可以工作- 无需在 CSS 中硬编码图像尺寸（两种用法都在 JSFiddle 中演示） 现代方法

grid 布局的缺点

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

<!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>

你可能想要这个：

<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 并不烦人。您只是没有阅读 the documentation。 ;P