文字少于

Question

我有一个文本图像组件，如果文本较少（条件一），我需要将文本中间垂直对齐浮动图像（对于较大的屏幕）。如果文本更多，那么让它环绕浮动图像（条件二）（再次用于更大的屏幕）。我怎么能在CSS中这样做或我们需要Javascript吗？这是fiddle。我的条件一和二都应该有效。

 .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,output

Answer 2

我会建议你比柔性框刻度更好/更旧用于居中元素。

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

对于垂直居中，使用显示内嵌块元素的propoerty，这些元素以中间对齐为中心显示行中的所有内联块。

让它更大我将其他元素移到中心

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

你只需要创建幽灵（不可见） - 红色元素来居中内容 - 蓝色和绿色元素。

对于在元素div之前或之后使用ghost元素：

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