user6039980 user6039980 - 6 months ago 21
CSS Question

How to align the content of two divs horizontally?

I'm trying to align two

div
s 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

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:

enter image description here

Middle Alignment:

enter image description here

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