浮动图像的左侧和中心文字垂直旁边的图像

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>