文字较少时将文字垂直对齐到图像

Question

我有一个文本图像组件，如果文本较少（条件一）（对于较大的屏幕），则需要将文本垂直对齐到浮动图像的中间。 如果文本更多，则让其环绕浮动的图像（条件二）（同样适用于大屏幕）。 如何在CSS中执行此操作，或者为此需要Javascript？ 这是小提琴 。 我的条件一和二都应该起作用。

  .clearfix { clear: both; } .text-img { padding-left: 15px; padding-right: 15px; } .text-img .info-box .info--body p { max-width: none; } .text-img .info-box { text-align: justify; } .text-img .stock-img { width: 100%; } @media (min-width: 992px) { .text-img.text-right .stock-img { width: 50%; float: left; } .text-img.text-right .stock-img { padding-right: 15px; padding-bottom: 15px; } .text-img.text-left .stock-img { width: 50%; float: right; } .text-img.text-left .stock-img { padding-left: 15px; padding-bottom: 15px; } } 

 <div class="clearfix text-img text-left"> <img src="https://cdn0.vox-cdn.com/thumbor/gvDQZLtlEM7U99rmTEdMoUtLRJU=/0x96:2039x1243/1600x900/cdn0.vox-cdn.com/uploads/chorus_image/image/50319283/ipad1_2040.0.0.jpg" alt="iPad" class="img-responsive stock-img" /> <div class="info-box"> <header class="info--header"> <h3 class="h3">The science of today is the technology of tomorrow.</h3> </header> <div class="info--body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc semper urna nec lectus malesuada tincidunt. Aenean faucibus, nulla sed luctus tempus, purus libero vestibulum velit, et blandit odio nunc ac quam. Donec tellus tellus, venenatis ac diam nec, sodales viverra orci.</p> </div> </div> </div> 

我希望最终输出是这样的，它满足我的两个条件：

给出的答案是正确的，仅靠CSS不能解决这个问题，因此我不得不提出jQuery解决方案。 对于那些在这种情况下寻求解决方案的人，以下是解决我的问题的jQuery代码：

$(document).ready(function() {

    $(".text-img").each( function() {
        var cH = parseInt( $( this ).height() );
        var tH = parseInt( $( this ).find('.info-box').height() );

        if( tH < cH ) {
            var pt = ( cH - tH ) / 2;

            $( this ).find('.info-box').css({
                "padding-top" : pt + "px"
            });
        }
    });

});

Answer 1

在较小的屏幕中时，请使用弹性框布局。

@media (min-width: 992px) {

  .text-left {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .text-left img {
    max-width: 50%;
    height: auto;
    margin-right: 10px;
  }

}

预习

输出： http : //jsbin.com/lulecudaji/edit?html,css，输出

Answer 2

对于中心元素，我建议您比弹性框标记更好/更老。

对于水平居中，只需使用text-align: center; 在容器div上

对于垂直居中，请使用显示内嵌块元素的属性，该元素在中间对齐以将所有显示内嵌块在行中居中。

扩大它，我将其他元素移到中心

使其高度为100％会使其他元素居中居中。

您只需要创建幻影（不可见）-以红色元素居中显示内容-蓝色和绿色元素。

对于幽灵元素，应在conteiner div之前或之后使用：

.continer:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

并显示内联阻止您的内容：

.content{
  display: inline-block;
}

当然删除position:absolute等

最后一项调整是摆脱元素之间的小空间（尤其是红色和其他元素之间的小空间），使用此处的一种技巧： https : //css-tricks.com/fighting-the-space-between-inline-block- elements /可能需要将字体大小设置为零。

有关幽灵元素的更多信息： https : //css-tricks.com/centering-in-the-unknown/