CODEWITHSUNDEEP
htmlcss
user6039980
user6039980

Reputation: 3506

How to align the content of two divs vertically?

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?

Upvotes: 6

Views: 39672

Answers (4)

dippas
dippas

Reputation: 60563

A few things first:

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

Option 1: using flebox

section {
  display: flex;
  gap: 10px;
}
 <section>
  <div>
   <img src="//dummyimage.com/55x55" alt="">
  </div>
  <div>
   <span> Look for cases </span>
   <span> from people near you. </span>
  </div>
 </section>

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>

Option #3 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>

Upvotes: 4

Prakash Bhandari
Prakash Bhandari

Reputation: 567

Try to seprate the CSS and HTML and do not mix display:inline-block with float:left. Also use clear:both after both div 

 <style>
        .fisrstDiv {
          float: left;
          display:block;
        }
         .secondDiv {
          float: left;
          display:block;
        }
      .clear {
          clear: both; 
        }
    </style>

HTML

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

<div class="secondDiv">
  <span> Look for cases </span>
  <span> from people near you. </span>
</div>
<div class="clear"></div>

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

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.

Upvotes: 9

trinaldi
trinaldi

Reputation: 2950

flexbox to the rescue.

I added your divs inside another one, which will align its items. In my CSS my image has 100px so I changed the width to 100px. Change yours accordingly.

.halign {
  display:flex;
  align-items: center;
}
<div class="halign">
<div style="width: 100px;">
        <img src="http://lorempixel.com/100/100/" alt="">
      </div>

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

Upvotes: 1

Related Questions