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

Posted 2023-03-05

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

【英文标题】：Vertical align text in div according the height of a floating image

【发布时间】：2014-10-21 05:17:07

【问题描述】：

我想构建一个显示带有描述的图像的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>

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

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

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

图形化：

我想要这个：

变成这样：

【问题讨论】：

考虑两种情况，我不这么认为。您可能需要使用 javascript 来实现效果。

很好的答案，但我在这里想知道是否可以仅使用 css 实现此结果

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

我也推荐一些 Javascript..

【参考方案1】：

使包装器 div display:table 和 text div display:table-cell;垂直对齐：中间；

如果它不起作用，那么还要在文本 div 上应用溢出：隐藏

【参考方案2】：

Here 是你会怎么做的

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> 标签中包含下面的 sn-p（在调用你所有的 jQuery 文档之前）

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

查看this 网站了解更多信息

【讨论】：

那是 JS + jQuery.

@DJDavid98 是的，这是个问题吗？

考虑到问题本身没有javascript 或jquery 标签，您可能需要明确说明，以便OP 知道您也在使用外部库。