CSS垂直对齐 [英] CSS vertical align

问题描述

我有一个浮动div的img，我不知道如何垂直居中。

I have a img in floated div and I don't know how to center it vertically.

<div style="height: 300px">
   <img style="height: 50px" src="something" />
</div>

vertical-align：middle当然不起作用。

vertical-align: middle of course doesn't work.

http://jsfiddle.net/wKQYj/

推荐答案

要垂直对齐父元素中的文本，并记住 img 是一个inline- 类似到文本，您可以简单地将 line-height 设置为 height 父元素：

To vertically-align text within a parent element, and bear in mind that an img is an inline-element and so behaves similarly to text, you can simply set the line-height to the height of the parent element:

div {
    height: 300px;
    line-height: 300px;
}

JS Fiddle demo 。

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