根据浮动图像的高度垂直对齐div中的文本

Question

我想构建一个html页面，显示带有描述的图像，描述和图像是动态生成的，并且可以找到这两种常见情况：

<div style="width:500px; padding:10px; border:solid 1px;">
  <div style="width:100%; overflow: auto; border:solid 1px;">
    <img style="float:right; width:40%" src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus justo pharetra, tincidunt erat nec, euismod quam. Fusce vel purus aliquet, posuere nulla ac, porta urna. Aliquam feugiat ligula vitae maximus tincidunt.
  </div>
</div>

<div style="width:500px; padding:10px; border:solid 1px;">
  <div style="width:100%; overflow: auto; border:solid 1px;">
    <img style="float:right; width:40%" src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus justo pharetra, tincidunt erat nec, euismod quam. Fusce vel purus aliquet, posuere nulla ac, porta urna. Aliquam feugiat ligula vitae maximus tincidunt. Suspendisse vel tristique massa. Ut lobortis sapien nec libero varius, vitae ullamcorper risus pretium. Nunc vulputate posuere auctor. Phasellus pulvinar nibh a risus semper, a lobortis justo ultricies. Etiam at pretium ligula. Nullam lobortis, nisl nec sollicitudin vestibulum, turpis neque porta neque, pellentesque egestas ipsum nunc id nisl. Morbi quis lacus quam. Pellentesque eget congue neque. Vestibulum elementum arcu nec condimentum posuere. Donec risus lorem, ornare pharetra ex a, lobortis molestie nunc. Suspendisse iaculis est eros, eu vestibulum nisi accumsan eget. Proin eget eleifend eros. 
  </div>
</div>

虽然第一个文本太短而无法包装图像，但第二个文本足够长以包装它。

我喜欢这种效果，但我想在第一种情况下稍微改变一下，所以这是我的问题：

是否可以垂直对齐文本，使其垂直居中，根据图像高度？ （当然我想保留更长文本的换行效果）

图形：

我要这个：

成为这个：

Answer 1

这是你怎么做的

HTML

<div class="container">
    <div class="something">
        <img src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg" />
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus justo pharetra, tincidunt erat nec, euismod quam. Fusce vel purus aliquet, posuere nulla ac, porta urna. Aliquam feugiat ligula vitae maximus tincidunt.</div>
    </div>
</div>
<div class="container">
    <div class="something">
        <img src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg" />
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempus justo pharetra, tincidunt erat nec, euismod quam. Fusce vel purus aliquet, posuere nulla ac, porta urna. Aliquam feugiat ligula vitae maximus tincidunt. Suspendisse vel tristique massa. Ut lobortis sapien nec libero varius, vitae ullamcorper risus pretium. Nunc vulputate posuere auctor. Phasellus pulvinar nibh a risus semper, a lobortis justo ultricies. Etiam at pretium ligula. Nullam lobortis, nisl nec sollicitudin vestibulum, turpis neque porta neque, pellentesque egestas ipsum nunc id nisl. Morbi quis lacus quam. Pellentesque eget congue neque. Vestibulum elementum arcu nec condimentum posuere. Donec risus lorem, ornare pharetra ex a, lobortis molestie nunc. Suspendisse iaculis est eros, eu vestibulum nisi accumsan eget. Proin eget eleifend eros.</div>
    </div>
</div>

CSS

.container {
    width:500px;
    padding:10px;
    border:solid 1px;
}
.something {
    width:100%;
    overflow: auto;
    border:solid 1px;
}
.something>img {
    float:right;
    width:40%
}

JS

$(document).ready(function () {
    var numberOfItems = $(".container").length;
    for (var i = 0; i < numberOfItems; i++) {
        var imageHeight = $(".container:eq(" + i + ")").children(".something").children("img").height();
        var divHeight = $(".container:eq(" + i + ")").children(".something").children("div").height();
        if (divHeight < imageHeight) {
            $(".container:eq("+i+")").children(".something").children("div").css({
                "margin-top": (imageHeight - divHeight) / 2 + "px"
            });
        }
    }
});

---

编辑

要使上面的jQuery工作，请在<header>标记中包含下面的代码段（在调用所有jQuery文档之前）

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

请查看此网站以获取更多相关信息

Answer 2

make wrapper div display：table和text div display：table-cell; verticle对齐：中间;

如果它不工作，那么也应用overflow：隐藏在文本div上