根据浮动图片的高度垂直对齐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>

虽然第一段文字太短而无法包裹图像，但第二段足够长以包裹它。

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

是否可能垂直对齐文本，使其根据图像高度垂直居中？（当然，我希望保留更长文本的包裹效果）

图形上：

我想要这个：

变成这样：

- Luca

---

考虑到两种情况，我不这么认为。你可能需要使用 JavaScript 来实现这个效果。 - Hashem Qolami

很好的答案，但我想知道是否可能仅使用CSS来实现这个结果。 - Luca

我也会说不，因为您需要在应用样式之前知道文本是否换行，以便将其居中 - 也就是说，您需要计算容器的高度，将其与图像的高度进行比较，然后如果图像大小相同，则应用居中样式。 - Pete

我还推荐一些JavaScript.. - Bokdem

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>

请查看this网站，以获取更多关于此事的信息。

- ctwheels

---

这是JS + jQuery。 - SeinopSys

@DJDavid98 是的，这有问题吗？ - ctwheels

你可能需要明确一下，这样原帖作者就知道你也在使用外部库了，因为问题本身没有出现 [tag:javascript] 或 [tag:jquery] 标签。 - SeinopSys

Answer 2

将包装器div的display属性设置为table，文本div的display属性设置为table-cell；垂直居中使用verticle-align属性。

如果不起作用，则还需在文本div上应用overflow:hidden属性。

- Dennis