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

我想构建一个显示具有说明图像的html页面，说明和图像是通过生成的，并可以找到这两种常见情况：根据浮动图像的高度垂直对齐div中的文本

unwrapped image

<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>

wrapped image

<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>

虽然第一文本太短包裹图像，第二次是足够LON g来包装它。

我喜欢这种效果，但我想在第一种情况变化不大，所以这里是我的问题：

可以垂直对齐文本等根据图像高度的垂直居中？（当然，我希望保留较长的文本换行效果）

图形：

我想这一点：

actual result

变成这样：

wished result

来源

2014-08-27 Luca

考虑到两个案例，我不这么认为。您可能需要使用JavaScript来达到效果。 – 2014-08-27 14:49:42

很好的答案，但我在这里知道是否有可能实现这个结果只使用css – Luca 2014-08-27 14:51:10

我也会说不，因为你会需要知道，如果文本是包装之前，你应用样式为了居中 - 即你将需要计算容器的高度，将其与图像的高度进行比较，然后应用居中样式，如果图像尺寸相同 – Pete 2014-08-27 14:55:36

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% 
}

$(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网站了解更多的信息

来源

2014-08-27 15:57:22 ctwheels

这是JS ** + jQuery **。 – SeinopSys 2014-08-27 15:57:53

@ DJDavid98是的，这是一个问题吗？ – ctwheels 2014-08-27 15:59:14

为了让OP知道您还在使用外部库，您可能需要说清楚，考虑到问题本身没有[tag：javascript]或[tag：jquery]标签。 – SeinopSys 2014-08-27 16:00:44

使包装div显示：table和text div display：table-cell; verticle对齐：中间;

如果不工作，那么也适用溢出：隐藏的文本DIV

来源

2014-08-27 15:55:37 Dennis

不起作用。文字不会在图像下流动。 – 2014-08-27 16:41:42

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

回答

相关问题