How to align the content of two divs vertically?

Question

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>

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?

Answer 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>

Preview

Top Alignment:

Middle Alignment:

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

Answer 2

• don't use inline styles
• don't mix float with inline-block

Option#1 using float

---

div {
  float: left;
  margin-right:10px
}

<div>
  <img src="//dummyimage.com/55x55" alt="">
</div>

<div>
  <span> Look for cases </span>
  <span> from people near you. </span>
</div>

Option#2 using inline-block

---

div {
  display:inline-block;
  vertical-align:top;
  margin-right:10px
}

<div>
  <img src="//dummyimage.com/55x55" alt="">
</div>

<div>
  <span> Look for cases </span>
  <span> from people near you. </span>
</div>