具有浮动同级元素的垂直居中

Question

我需要将div垂直居中放置，与浮动div相邻。

.pic {float: left; width: 50%; border: 1px solid red;}
.description {border: 1px dotted green;}

<div class="container">
  <figure>
    <div class="pic">pic1<br>this is a big pic</div>
    <div class="description">one</div>
  </figure>
  <figure>
    <div class="pic">pic2<br>this<br> is a pic2<br>this is another big pic</div>
    <div class="description">this is a multiline text example, yes, multiline one</div>
  </figure>
  <figure>
    etc...
  </figure>
</div>

是否有一种方法可以使description 居中而无需修改以下内容的CSS或HTML：

a）浮动.pic
b）.description父元素？

我只需要文字即可
-居中
-在“ .pic”的右侧

我不关心的绿色边框行为...

此外，与 IE11

兼容

Answer 1

您可以使用flexbox。

figure {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.pic {float: left; width: 50%; border: 1px solid red;}
.description {border: 1px dotted green;}

<div class="container">
  <figure>
    <div class="pic">pic1<br>this is a big pic</div>
    <div class="description">one</div>
  </figure>
  <figure>
    <div class="pic">pic2<br>this<br> is a pic2<br>this is another big pic</div>
    <div class="description">two</div>
  </figure>
  <figure>
    etc...
  </figure>
</div>

Answer 2

最后，通过多行文字测试，我可以使James的答案适应我的需求。这是这样的

figure {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.pic {
  float: left;
  width: 50%;
  border: 1px solid red;
  box-sizing: border-box;
}

.description {
  border: 1px dotted green;
  max-width: 50%;
  box-sizing: border-box;
}

<div class="container">
  <figure>
    <div class="pic">pic1<br>this is a big pic</div>
    <div class="description">one</div>
  </figure>
  <figure>
    <div class="pic">pic2<br>this<br> is a pic2<br>this is another big pic</div>
    <div class="description">two twotwo two two twotwo twotwo twotwo two two twotwo two two twotwo twotwo twotwo two two twotwo two two twotwo twotwo twotwo two two twotwo two two twotwo twotwo twotwo two two twotwo two two twotwo twotwo twotwo two two twotwo two two twotwo twotwo twotwo two two twotwo two two twotwo twotwo twotwo two two twotwo two two twotwo twotwo twotwo two</div>
  </figure>
  <figure>
    etc..
  </figure>
</div>