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

【问题标题】：Vertically align text next to an image?垂直对齐图像旁边的文本？
【发布时间】：2010-10-04 02:40:42
【问题描述】：

为什么vertical-align: middle 不起作用？然而，vertical-align: top 确实有效。

span{
  vertical-align: middle;
}

<div>
  <img src="https://via.placeholder.com/30" alt="small img" />
  <span>Doesn't work.</span>
</div>

【问题讨论】：

标签： html css alignment vertical-alignment

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

使用 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>

【讨论】：

【解决方案3】：

实际上，在这种情况下，它非常简单：将垂直对齐应用于图像。既然都在一行，那就真的是你要对齐的图片，而不是文字。

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://via.placeholder.com/60x60">
  <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>

【讨论】：

flex 解决方案比 vertical-align 解决方案更好，因为它也可以处理多行文本的情况。

【解决方案4】：

在 css 中使用 `flex property`。

如果您想使用 in flex 使用 justify-content:center; 将文本水平居中对齐，请使用 align-items:center; 将文本垂直居中对齐。

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

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

在 css 中使用 `table-cell`。

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>

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

将您的 div 更改为弹性容器：

div { display:flex; }

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

方法一：

div { align-items:center; }

DEMO

方法二：

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

DEMO

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

【讨论】：

为了使文本在图像旁边或之间居中（在页面上水平），您还需要添加 justify-content: center; 和间距（不使用
标签），您可能还想要输入padding: 1em;。对于我们现代浏览器开发者来说，这是一次很棒的更新。
这很好用。我尝试了其他每个答案，虽然它们在一定程度上起作用，但它对我不起作用。我有大约 3 行文本要对齐，这个答案非常有效。谢谢@Mori

【解决方案7】：

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

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>

【讨论】：

【解决方案8】：

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

如果有人需要将多行文本垂直居中到图像，这里有几种方法（方法一和二受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：弹性盒 (FIDDLE) (caniuse)

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

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

【讨论】：

如果图像（高度）大于文本，这些方法可以正常工作。但是如果图像更小，那么除了最后一个之外，所有的都失败了

【解决方案9】：

首先，内联 CSS 完全不推荐，它真的把你的 HTML 搞乱了。

为了对齐图像和跨度，您可以简单地执行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 有很多很好的理由。以React: CSS in JS 为例。

【解决方案10】：

这里有一些简单的垂直对齐技巧：

单行垂直对齐：中间

这很简单：将文本元素的行高设置为容器的行高

<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

为了让它全面正常工作，您必须稍微修改一下 CSS。幸运的是，有一个对我们有利的 IE 错误。在容器上设置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>

可变容器高度vertical-align:middle

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

将以下 3 行 CSS 应用于一个元素将使其在其父元素中垂直居中，而与父元素的高度无关：

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

【讨论】：

display:table 和 display:table-cell CSS 选择器效果很好，当然，在 IE7 及更低版本中除外。扯了几个小时的头发后，我决定我真的不需要和任何仍在使用 IE7 的人打交道。

【解决方案11】：

这可能会令人困惑，我同意。尝试利用表格功能。我使用这个简单的 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; }

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

【讨论】：

【解决方案12】：

您可以使用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>

【讨论】：

【解决方案13】：

编写这些跨度属性

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

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

【讨论】：

【解决方案14】：

在这些答案中还没有看到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;
}

【讨论】：

这里是确切的解决方案。它也适用于多行文本......以上不适用于多行。

【解决方案15】：

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

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

accepted answer 确实将图标置于其旁边文本 x 高度的一半左右（如 CSS specs 中所定义）。如果文本在顶部或底部有突出的升序或降序，这可能已经足够好，但看起来有点偏离：

左边，文字没有对齐，右边如上图。现场演示可以在 article about vertical-align 中找到。

有没有人谈到为什么vertical-align: top 在场景中起作用？ 问题中的图像可能比文本高，因此定义了行框的顶部边缘。 vertical-align: top 在 span 元素上，然后将其放置在行框的顶部。

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

【讨论】：

【解决方案16】：

多行解决方案：

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+

【讨论】：

【解决方案17】：

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

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

【讨论】：

【解决方案18】：

此代码适用于 IE 和 FF：

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

【讨论】：

【解决方案19】：

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

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

【讨论】：

在图像大小未知或动态的情况下没有帮助。

【解决方案20】：

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

这确实是最简单的方法。

【讨论】：

请注意，如果您的内容分布在多行上，这将无法正常工作。
那么为什么不直接使用 line-height:100% 呢？

【解决方案21】：

基本上，您必须使用 CSS3。

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

【讨论】：

【解决方案22】：

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

【讨论】：

我尝试将 line-height 设置为 30px，但它仍然不起作用。

【解决方案23】：

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

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

【讨论】：

【解决方案24】：

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

CSS 将 HTML 标记分为两组：行内标记和块级标记。搜索“css block vs inline”，就会出现一篇很棒的文章……

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

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

【讨论】：

text-align 和 vertical-align（除了用于遗留用途的 td 元素）专门用于 inline 和 inline-block 元素（span、@987654328 @等）。

【解决方案25】：

你可能想要这个：

<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

【讨论】：

如果图像高度是动态的？我搞砸了 :( PS，仅仅因为 CSS 的文档存在并不会让它变得烦人或不直观。
我和山姆一起做这个。我认为项目应该以 img 高度为中心。我想我们都可以冷静下来。

在 css 中使用 flex property。

在 css 中使用 table-cell。

方法 #1：CSS 表格 (FIDDLE) (IE8+ (caniuse))

方法 #2：容器上的伪元素 (FIDDLE) (IE8+)

方法 #3：弹性盒 (FIDDLE) (caniuse)

单行垂直对齐：中间

多行垂直对齐：底部

多行垂直对齐：中间

如果你必须支持旧版本的IE

可变容器高度vertical-align:middle

HTML

CSS

在 css 中使用 `flex property`。

在 css 中使用 `table-cell`。