为什么不垂直对齐:中间工作?然而,垂直对齐:顶部确实有效。

跨度{垂直对齐:中间;}<div><img src=“https://via.placeholder.com/30“alt=”小img“/><span>不起作用</span></div>


当前回答

可以使用display属性将图像设置为内联元素

<div><img style=“vertical align:middle;display:inline;”src=“https://placehold.it/60x60"><span style=“vertical align:middle;display:inline;”>有效</span></div>

其他回答

基本上,你必须降到CSS3。

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

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

如果有人需要将多行文本垂直居中放置到图像中,以下是几种方法(方法1和方法2受此CSS技巧文章启发)

方法#1:CSS表格(FIDDLE)(IE8+(犬))

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)(犬用)

CSS(上面的fiddle包含供应商前缀):

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

您必须对两个元素应用垂直对齐:中间对齐,以使其完全居中。

<div><img style=“vertical align:middle”src=“http://lorempixel.com/60/60/">完美居中</span></div>

被接受的答案确实将图标置于旁边文本x高度的一半左右(如CSS规范中所定义)。这可能足够好,但如果文本在顶部或底部有上升部分或下降部分,则可能看起来有点偏离:

左侧的文本未对齐,右侧的文本如上图所示。在这篇关于垂直对齐的文章中可以找到一个实时演示。

有人讨论过为什么垂直对齐:顶部在场景中起作用吗?问题中的图像可能比文本高,因此定义了线框的顶部边缘。垂直对齐:在span元素的顶部,然后将其放置在线框的顶部。

垂直对齐:中间和顶部之间行为的主要区别在于,第一个相对于框的基线移动元素(将其放置在需要实现所有垂直对齐的位置,因此感觉相当不可预测),第二个相对于线框的外部边界移动元素(更为有形)。

对于记录,对齐“命令”不应该在SPAN上工作,因为它是一个内嵌标记,而不是块级标记。对齐、边距、填充等功能在内联标记上不起作用,因为内联的目的是不中断文本流。

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

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

(理解CSS的核心原则是它不那么烦人的关键)

多线解决方案:

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+