垂直居中，有一個浮動的兄弟元素

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>

有沒有辦法在不修改（的 CSS 或 HTML）的情況下將description居中：

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>