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

Question

我有一张图片和一些文字。我想在<div> 中将它们垂直居中。 在 NOT 更改 <img> 标记中的任何内容时，我该如何做到这一点？

我知道很多人建议如下：

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

由于某些原因，我不想更改<img> 标记中的任何内容。我可以通过仅在<div> 或<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;
}