浮動圖像的左側和中心文字垂直旁邊的圖像

Question

所以我一直在努力解決這個問題一段時間，我找不到一個好的解決方案。

我想要在div容器左側的縮略圖圖像和垂直居中的圖像旁邊的文本。

目前的代碼看起來像這樣：

.img-thumbnail{ 
display: inline-block; 
vertical-align: middle; 
float: left; 
} 

.text{ 
display: inline-block; 
vertical-align: middle; 
} 

，效果是這樣的： http://prntscr.com/ff9mhi

但是，如果我刪除浮動：從它們都是垂直居中的DIV中的圖像左，但這不是我想要的。我需要將圖像浮動到左側，因爲它會變得更小，文字會變長

Answer 1

不要浮動圖像，只在圖像上使用vertical-align。

.img-thumbnail{ 
 
display: inline-block; 
 
vertical-align: middle; 
 
} 
 

 
.text{ 
 
display: inline-block; 
 
}

<header> 
 
    <div class="img-thumbnail"> 
 
    <img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png"> 
 
    </div> 
 
    <div class="text"> 
 
    text 
 
    </div> 
 
</header>

你也可以讓家長display: flex; align-items: center;做同樣的事情，用更少的代碼，並有超過定位更多的選擇。我會建議使用這個，但是也想提供一個解決方案與你的原始代碼，因爲你離得很近。

header { 
 
    display: flex; 
 
    align-items: center; 
 
}

<header> 
 
    <div class="img-thumbnail"> 
 
    <img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png"> 
 
    </div> 
 
    <div class="text"> 
 
    text 
 
    </div> 
 
</header>