文字較少時將文字垂直對齊到圖像

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/