Html 垂直对齐的图像和文本div

更新：答案已经让我接近了，但它们仍然没有垂直对齐，因为文本div更大，如何使它们都具有相同的高度并因此对齐

我希望有两个相邻的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>
    <div style="background: grey; width: 15%; float:left"></div>
    <div style="background: blue; width: 85%; float:left"></div>
</div>

用图像替换灰色背景div，用文本替换蓝色背景div。

HTML:

这就是你的意思吗

html

---

这里有一把小提琴，上面有你的代码：

---

我所做的唯一更改是为

img

和

p

标记分配匹配的上/下页边距。我想这会给你带来你想要的效果

为什么不将

#text p

显示设置为

display:inline

或

display:block或使用边距对齐它们？
如果使用float和verticl align，这两种方法将无法协同工作。

Float将自己从常规流中提取出来，在常规流中的任何内容之后，在下一行顶部的一侧或另一侧滑动

垂直对齐工程：

在中间的内联框中（内联块级元素或使用
显示：内联块；
）
td内部或其CSS默认显示：
display:表格单元格

这里是jsfiddle@TXChetG更新

使用
显示：内联块

使用
显示：表格/*表格单元格*/

请为您尝试过的内容发布代码。
我尝试过这样做
向我们展示您尝试过的内容。这很接近，但图像和文本不对齐，因为它们的高度不同，有没有办法解决这个问题？如果您知道内容的高度，您可以在div上设置静态高度，它们应该对齐。它们不会是静态的，图像div的高度应与文本div的高度相匹配，且图像垂直居中如果两个高度应匹配，则使用display:table/table cell，您可以在各自的容器中垂直对齐文本和/或图像。+1 thx对于JSFIDLE，但不是因为代码float和vertical align不能友好地结合使用。我要做的唯一更正是，因为有填充，所以将宽度百分比减少到<100%（大约为98%），因为大小调整可能会导致文本显示在图像下。
<div>
    <div style="background: grey; width: 15%; float:left"></div>
    <div style="background: blue; width: 85%; float:left"></div>
</div>

<section>
    <div id="one"></div>
    <div id="two"></div>
</section>

section {
    width: 80%;
    height: 200px;
    background: aqua;
    margin: auto;
    padding: 10px;
}
div#one {
    width: 15%;
    height: 200px;
    background: red;
    float: left;
}
div#two {
    margin-left: 15%;
    height: 200px;
    background: black;
}

<div class="container">
  <div class="images">
    <img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
  </div>
  <div class="text">
    Example
  </div>
</div>   
<div class="container">
  <div class="images">
    <img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
  </div>
  <div class="text">
    Example
  </div>
</div>

.container {
  clear: both;
}
.images {
  width: 15%;
  float: left;
  vertical-align: text-top;
}
.text {
  width: 85%;
  float: right;
  vertical-align:text-top;
}

<div id="quotes">
    <div id="picture">
        <img 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>

#quotes {
    display:table;
}
#picture {
    width: 15%;
    display:table-cell;
    vertical-align: middle;
}
#text {
    display:table-cell;
    width:85%;
    padding-left: 16%;
}
#picture img {
    width: 100%;
}