css - CSS如何在不改变图像样式的情况下垂直居中图像和文本

Question

我有一张图片和一些文字。我想将它们都垂直居中<div>。如何在不更改<img>标签中的任何内容的情况下做到这一点？

我知道很多人建议如下：

<div>
<img style="vertical-align:middle; height: 30px;" src ="image.png"/>
<span style="line-height: 30px;" > my text </span> 
</div>

由于某些原因，我不想更改<img>标签中的任何内容。我可以通过仅在<div>or<span>或其他地方添加样式来将它们都居中吗？

顺便说一句，我也知道有些人说以下方法会起作用：

<div>
<img height=30px; src ="image.png"/>
<span style="line-height: 30px;" > my text </span>
</div>

但这对我不起作用。那么有什么想法吗？

谢谢。

Answer 1

试试这个 - http://jsfiddle.net/J4QJA/

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

img {
    vertical-align: middle;
}
​

...

更新

如果您不能/不想将任何样式应用于<img>您可以使用包装器 - http://jsfiddle.net/J4QJA/3/

HTML

<div class="wrapper">
    <div class="image-wrapper">
        <img src="http://lorempixel.com/200/100" />
    </div>
    <div class="image-wrapper">
        Lorem ipsum doloe sit amet
    </div>
</div>​

CSS

div.wrapper {
    height: 300px;
    background: beige;
}

div.image-wrapper {
    display: block;
    position: relative;
    top: 50%;
    margin-top: -50px; /* half of your image height */
    line-height: 100px;
    width: 200px;
    float: left;
}