当文本较少时，垂直对齐文本中间到图像

I have a text-image component, and i need to vertical-align text middle to the floated image , if the text is less (condition one) (for larger screens). if the text is more then let it wrap around the floated image (condition two) (again for larger screens). How can i do this in CSS or do we need Javascript for this? Here is fiddle. Both my conditions one and two should work.

我有一个文本图像组件，如果文本较少（条件一），我需要将文本中间垂直对齐浮动图像（对于较大的屏幕）。如果文本更多，那么让它环绕浮动图像（条件二）（再次用于更大的屏幕）。我怎么能在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>

I want the final output to be like this, which satisfys both my condition:

我想最终输出是这样的，它满足我的条件：

Well the answers given are right, this cannot be solved just by CSS alone, so i had to come up with jQuery solution. For those looking for solution for such scenarios, here is jQuery code that solved my problem:

那么答案是正确的，这不能仅靠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"
            });
        }
    });

});

2 个解决方案

#1

Use a flex box layout when you are in the smaller screens.

当您处于较小的屏幕时，请使用弹性框布局。

@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;
  }

}

Preview

预习

Output: http://jsbin.com/lulecudaji/edit?html,css,output

输出：http：//jsbin.com/lulecudaji/edit？html，css，output

#2

I would recommend you better/older than flex-box tick for centring elements.

对于定心元素，我建议你比弹性框更好/更旧。

For horizontal centring use simply text-align: center; on container div

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

For vertical centring uses propoerty of display inline-block elements which aligned in to the middle to center all display inline-block in the line.

对于垂直居中，使用显示内联块元素的propoerty，其对齐到中间到中心所有显示行中的内联块。

Making it bigger i'll move other elements to the center

把它做得更大我会把其他元素移到中心

Making it 100% height causes the othere elements centers to the middle.

使其100％高度导致其他元素居中到中间。

You simply need to create ghost (not visible) - red element to center content - blue and green elements.

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

For ghost element use for it before or after of conteiner div:

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

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

And display inline-block your content:

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

.content{
  display: inline-block;
}

Of course delete position:absolute etc.

当然删除位置：绝对等

Last tweak will be to get rid of that small spaces between elements (especially between red and others) use one of the tricks from here: https://css-tricks.com/fighting-the-space-between-inline-block-elements/ Probably you will need to set font size to zero.

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

More about ghost elements: https://css-tricks.com/centering-in-the-unknown/

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

#1