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

为什么不vertical-align: middle工作?但是, vertical-align: top 确实有效。

span{
  vertical-align: middle;
}
<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>Doesn't work.</span>
</div>

答案

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

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

以下是一些用于垂直对齐的简单技术:

单行垂直对齐:中间

这很简单:将 text 元素的 line-height 设置为等于容器的高度

<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。幸运的是,有一个 IE 错误对我们有利。在容器上设置top:50% ,在内部 div 上设置top:50% 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%);

div更改为 flex 容器:

div {display:flex;}


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

方法 1:

div {align-items:center;}

演示


方法 2:

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

演示


img上尝试使用不同的 width 和 height 值,在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 规范中所定义)。如果文本的上升或下降部分仅在顶部或底部突出,那么这可能已经足够好了,但看起来可能有些偏离:

居中图标比较

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

有谁谈论过为什么vertical-align: top在场景中起作用?问题中的图像可能比文本高,因此定义了线框的顶部边缘。 vertical-align: top在 span 元素的顶部,然后将其放在行框的顶部。

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

如此处所述,在接受的答案中使用的技术仅适用于单行文本( 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 */
}

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

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

因为您必须将line-height设置为 div 的高度才能起作用

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

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

作为记录,对齐 “命令” 在 SPAN 上不起作用,因为它是行内标签,而不是块级标签。诸如对齐,边距,填充等之类的内容在行内标签上不起作用,因为行内点不是为了干扰文本流。

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

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

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

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

这是最简单的方法。