html - 垂直对齐 : middle for an object floated from left to the right

Question

第一:我想，和大家一样，我喜欢这个页面!通常我可以在这里找到所有东西。但这次不是。那我自己问吧。

HTML

<div>
<div class="img-wrap">
   <figure>
        <img src="http://www.porcelaingres.de/img/prodotti/collezioni/just_grey_dark_grey.jpg" style="">
   </figure>
</div>
<div class="text">
    <p>"Ich bin aus dem Dialogforum in der vergangenen Woche mit sehr viel Energie gegangen und werde die Themen meinen 20 Mitarbeitern unter anderem in unserer wöchentlichen Teamsitzung vermitteln."</p>
</div>

CSS

.img-wrap {
    float: right; 
}

.img-wrap img {
    height: 320px; width: 320px; background: grey; border-radius: 50%;
}

我正在尝试vertical-align:middle 图像旁边的文本。

到目前为止，我已经找到了答案，但我的问题是:结构不可编辑，图像是代码中首先提到的，但向右浮动(float:right)。

直到现在，我找不到不编辑结构的方法。

有人能帮帮我吗？

JS Fiddle

Answer 1

你可以使用

.text{
  height: 320px;
  display: table-cell;
  vertical-align: middle;
}

https://jsfiddle.net/vuhynym8/2/