Question

我有一张图片和一些文字。我想在<div＆gt;中垂直居中。如果不更改<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;
}

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

1 个答案: