html - 有没有不使用显示器:table-cell on the parent?垂直居中文本的好方法

Question

这是一个很常见的情况:设计师告诉我一些文本应该垂直居中，但我不能使用 display:table-cell; hack 因为包含元素需要具有不同的显示属性。由于出现的问题，我也不想使用任何 position:absolute。

fiddle :https://jsfiddle.net/z824m656/1/

HTML

<div class="contents-vertically-centerd">
  <img src="https://blog.stackoverflow.com/images/wordpress/stackoverflow-logo-300.png" width="150"/><span>Here's some text that I want vertically centered with respect to the image</span>
</div>

CSS

div.contents-vertically-centerd { padding: 10px; border: 1px dashed #000000; }

Answer 1

您需要垂直对齐图像，而不是文本。

你试过吗:

div img {
vertical-align: middle;
}

在您描述的那种情况下，如果您:

• 明确声明height图片的
• 声明display的 <span>文本为 inline-block
• 明确声明height的 <span>
• 明确声明line-height的 <span>