Why this Image and div is not aligned

Question

I'm trying to align this SVG icon with this text.but I don't understand why they are not aligned even both elements are inline.

Please note I,m not asking how to align them. I just want to understand why these two elements treated differently even I set them display:inline-block;

<div>
  <div style="display: inline-block;">
    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" style="display: block;">
      <path d="M0 0h24v24H0z" fill="none" />
      <path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z" />
    </svg>
  </div>
  <span style="display: inline-block;"> Some Text</span>
</div>

Please describe in more detail what the actual problem is. As far as I can see from the code you posted the elements are perfectly aligned. If you set the fill for your first path element in your SVG element then you will see it much clearer. — cloned, Oct 16 '20 at 06:14
I mean why is this text is slightly below than the image. it is not on same line. — harshasoysa, Oct 16 '20 at 06:21

score 2 · Answer 1 · answered Oct 16 '20 at 06:17

You can align items center by setting the root div with flex layout and apply these styles.

.container {
  display: flex;
  align-items: center;
}

.container {
  display: flex;
  align-items: center;
}

<div class="container">
  <div style="display: inline-block;">
    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" style="display: block;">
      <path d="M0 0h24v24H0z" fill="none" />
      <path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z" />
    </svg>
  </div>
  <span style="display: inline-block;"> Some Text</span>
</div>

cloned · Accepted Answer · 2020-10-16T08:31:55.967

Your image is perfectly on the same line as your text. You have two path elements in your SVG, if you set the fill of your svg element to, for example pink you see it much clearer:

<div>
  <div style="display: inline-block;">
    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" style="display: block;">
      <path d="M0 0h24v24H0z" fill="pink" /> <!-- ADDED PINK FILL HERE -->
      <path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z" />
    </svg>
  </div>
  <span style="display: inline-block;background-color:red"> Some Text</span>
</div>

If you want to have the three lines aligned differently you have two options: Either move the SVG up or down or to move the paths inside the SVG.

So as I understand actually image is aligned with the text baseline.. — harshasoysa, Oct 16 '20 at 06:53

score 0 · Answer 3 · answered Oct 16 '20 at 06:18

You can use vertical-align, I have used vertical-align:super;

<div>
  <div style="display: inline-block;">
    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" style="display: block;">
      <path d="M0 0h24v24H0z" fill="none" />
      <path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z" />
    </svg>
  </div>
  <span style="display: inline-block;vertical-align: super;"> Some Text</span>
</div>

Why this Image and div is not aligned

3 Answers3