题 垂直对齐图像旁边的文字?


为什么不呢 vertical-align: middle 工作?但是, vertical-align: top   工作。

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

1686
2018-01-28 21:01


起源


这是一篇有趣的文章: 理解 vertical-align - Phaedrus
从语言的角度来看,当然不能介入并保护CSS,但很多我的挫折感来自于某些功能根据你所使用的浏览器而有效。即使在今天,当现代的“浏览器大战”是更多关于谁最符合标准,仍有一些警告,并且确实限制了功能列表。 - Mattygabe
异端邪说:<td> img </ td> <td valign =“middle”> text </ td> - T4NK3R
648+人会认为我疯了,但接受的答案对我不起作用。但是这确实... <div> <img style =“width:30px; height:60px; vertical-align:middle”> <span style =“height:60px; vertical-align:middle”> Works。</ span > </ div> - Zach


答案:


实际上,在这种情况下,它非常简单:将垂直对齐应用于图像。由于它全部在一行中,它实际上是您想要对齐的图像,而不是文本。

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


1902
2018-01-28 21:10



在IE 6和7中测试过。 - Ben
“由于它只是在一行中,它实际上是你要对齐的图像,而不是文本。” - 不,图像很好,它在哪里。我们希望文本对齐。不是形象。 - 我知道这有用(在某些情况下,例如:当你没有在图像上使用“float:left”时),但是将文本物理移动到垂直中间是奇怪而且不直观的必须将属性应用于旁边的图像。 - BrainSlugs83
@ BrainSlug83这当然不奇怪,但我可以看到新人如何被这个绊倒。默认情况下,图像将放置在文本基线上。您所做的就是移动图像相对于文本的位置。至于使用float:left,你应该在包含图像和文本的块上,或者在文本本身上这样做。 - jamesrom
@ BrainSlugs83同意它可以被视为违反直觉。这需要一点心理转变,因为根据CSS,你需要做的是将图像置于文本中心。不是图像的文字。 - Greg Pettit
如果你增加,它不起作用 span 字体大小。看到 我的答案。 - Mori


以下是一些垂直对齐的简单技巧:

单线垂直对齐:中间

这很容易:将文本元素的行高设置为等于容器的行高

<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% 在容器和 top:-50% 在内部div上,你可以达到同样的效果。我们可以使用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%);

317
2018-01-28 21:45



该 display:table 和 display:table-cell CSS选择器工作得很好,当然,除了IE7及以下版本。把头发撕了好几个小时后,我觉得我并不需要和任何仍然使用IE7的人打交道。 - banncee
display:table 在各种浏览器中都有一些限制(在IE11中 max-height 如果元素在表格单元格内,则不起作用),因此在某些边缘情况下,使用表格单元格垂直对齐并不是一个好主意。 - jahu
让Internet Explorer与众不同 - Ĭsααc tիε βöss


改变你的 div 进入flex容器:

div {display:flex;}


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

方法1:

div {align-items:center;}

DEMO 


方法2:

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

DEMO 


尝试不同的宽度和高度值 img 和不同的字体大小值 span 你会发现它们总是留在容器的中间。


79
2018-03-24 07:54



这在Firefox中对我很有用! ...但它似乎不适用于Chrome(使用版本42) - Chris
它适用于最新版本的Chrome,42.0.2311.90米,没问题。 - Mori
最简单的方法,适用于不同的字体大小 - woojoo666
为了使文本在图像旁边或图像之间居中(在页面上水平),您还需要添加 justify-content: center; 并且对于间距(不使用<br/>标签),您可能也想要投入 padding: 1em;。我们现代浏览器开发人员的最新更新。 - CSS
谢谢。无论出于何种原因,这是对我有用的唯一答案(出于此,以及上面的答案)。 - inspirednz


你必须申请 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规范)。如果文本的顶部或底部突出的上升或下降,这可能是足够好但可以看起来有点偏差:

centered icon comparison

在左侧,文本未对齐,在右侧,如上所示。在这里可以找到现场演示 关于垂直对齐的文章

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

行为之间的主要区别 vertical-align: middle 和 top 是第一个移动元素相对于框的基线(放置在任何需要的地方,以实现所有垂直对齐,因此感觉相当 不可预料的)和第二个相对于线框的外边界(更有形)。


68
2017-09-11 12:58



实际上这个答案确实帮助了我,尽管已经接受了答案的超级投票。感谢名单! - Bernoulli IT
这真是一个很好的答案。我一直认为,如果没有诡计,真正无法解决轻微偏离垂直中心的问题。 - Brad
我同意,这个答案简洁明了,而且很有效。它也不依赖于不一致支持的css3等。 - Lizardx
这适用于不同的字体大小。 - Robert Moore
我注意到顶级作品和底部作品但不是中间作品。基本上,“中间”未定义为顶部和底部之间的中间位置。它更多的意思是“当它比文本更高时,两种方式都是平等的。”在这里你根本不需要垂直对齐:文本中间,只需要图像。 - Curtis


接受的答案中使用的技术仅适用于单行文本(演示),但不是多行文字(演示) - 如前所述。

如果有人需要将多行文本垂直居中到图像,这里有几种方法 (方法1和2的启发 这篇CSS-Tricks文章

方法#1:CSS表格(小提琴)(IE8 +(我可以用吗))

CSS:

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

方法#2:容器上的伪元素(小提琴)(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(小提琴)(我可以用吗

CSS (以上小提琴包含供应商前缀):

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

47
2017-12-24 21:06



#1方法非常棒!我有2个div - 一个有文本 - 另一个 - 一个图像。现在他们都垂直居中。而且非常简单。在FF34.0.5和IE8中测试过。谢谢你。 - Ernestas Gruodis
如果图像比文本更大(高度),则方法可以正常工作。但是如果图像较小,那么除了最后一个之外的所有图像都会失败 - Thomas


此代码适用于IE以及FF:

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

23
2017-07-02 14:41



这不是与2009年给出的那个相同的答案,当时被认为是正确的吗? - Mr Lister
是的......但是“自动”几乎没有变化,以避免硬编码 - HTMLnewBie


因为你必须设置 line-height 到这个工作的div的高度


16
2018-01-28 21:05



然而,在表中执行此操作将通过“vertical-align:center”实现。 CSS打击。 - sam
我尝试将行高设置为30px,但仍然无法正常工作。 - sam