Question

所以我一直在努力解决这个问题，我找不到一个好的解决方案。

我想在div容器内左边有一个缩略图，而在垂直居中的图像旁边有文字。

目前代码如下：

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

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

效果是这样的： http://prntscr.com/ff9mhi

然而，如果我从图像中移除float：left，它们都在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>

将图像垂直浮动到图像旁边的左侧和中心文本

1 个答案: