如何垂直对齐两个div的内容?

问题描述

我正在尝试在HTML内水平对齐两个div:第一个包含图像，第二个包含文本，这是使用的代码:

I'm trying to align two divs horizontally inside my HTML: the first one contains an image and the second a text, and this is the used code:

<div style="float: left; width: 55px;">
  <img src="../img/look.svg" alt="">
</div>

<div style="display: inline-block;">
  <span> Look for cases </span>
  <span> from people near you. </span>
</div>

我尝试了许多方法，但是我一直无法使文本行与图像垂直轴处于同一水平，并且第二个div内部的文本显示得与图像垂直方向相差很远.

I tried many methods, but I've been unable to get the text line in the same level as the image vertical axis, and the text inside the second div gets displayed very far from the image vertically.

那么，有可能解决这个问题吗?

So, is there any possibility to fix that?

推荐答案

问题出在float上. vertical-align: middle; line-height: 1;将解决此问题:

The problem is with the float. The vertical-align: middle; line-height: 1; will fix the issue:

div {
  display: inline-block;
  vertical-align: top;
  line-height: 1;
}

div:first-child {
  width: 55px;
}

<div>
  <img src="//placehold.it/50?text=DP" alt="">
</div>

<div style="display: inline-block; vertical-align: middle; line-height: 1;">
  <span> Look for cases </span>
  <span> from people near you. </span>
</div>

预览

顶部对齐:

中间对齐方式:

vertical-align确定垂直对齐方式.如果希望图像和文本在同一行上，请使用vertical-align: top.

The vertical-align decides the vertical alignment. If you want the image and text to be on the same line, use vertical-align: top.

这篇关于如何垂直对齐两个div的内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！