垂直对齐图像旁边的文本？ [英] Vertically align text next to an image?

问题描述

为什么不会 vertical-align：middle 工作？

  < div> 
< img style =width：30px; height：30px> 
< span style =vertical-align：middle>无效。< / span> 
< / div> 
  

解决方案

实际上，这种情况很简单：垂直对齐图像。

 <！ -  movedvertical-align：middlestyle from span to img  - >< div> < img style =vertical-align：middlesrc =https://placehold.it/60x60> < span style =>工作< / span>< / div>  

在FF3中测试。

Why won't vertical-align: middle work? And yet, vertical-align: top does work.

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

解决方案

Actually, in this case it's quite simple: apply the vertical align to the image. Since it's all in one line, it's really the image you want aligned, not the text.

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

Tested in FF3.

这篇关于垂直对齐图像旁边的文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！