html - 垂直对齐的图像和文本 div

Question

UPDATE: The answers have got me close, but they still don't align vertically as the text div is larger, how can I make them both the same height and therefore align?

我想要两个相邻的 DIV，一个包含图像，一个包含文本，两者都位于一个容器 DIV 中。

图像应占容器 div 宽度的 15%，文本使用剩余的 85%

图像和文本应在各自的 DIV 中垂直对齐，这样看起来它们就相互对齐了。

我试过解决这个问题，但似乎做不到!谁能帮忙？

#picture {
    float: left;
    width: 15%;
    line-height: auto;
}

#text {
    width: auto;
    padding-left: 16%;
    line-height: auto;
    vertical-align: middle;
    margin-top: auto;
    margin-bottom: auto;
}

#text p {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

和

 <div id="quotes">
    <div id="picture">
        <img style="width: 100%; vertical-align: middle" src="tom.jpg" >
    </div>
    <div id="text">
        <p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
    </div>
</div>              

Answer 1

这是一个包含您的代码的 fiddle :http://jsfiddle.net/hQ6Vw/1/

我所做的唯一更改是将匹配的顶部/底部边距分配给 img 和 p 标签。我认为这会给你想要的效果。