0

Well consider I have two elements: an svg image (icon) and a paragraph (styled to be inline). I wish to render them side to side inside a div, and I wish to align them "in the middle".

Now I "got" this working using display: inline-flex for the outer div as follow:

<div class="grouper borderhelper">
<p style="display:inline">test</p>

<svg class="icon" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"></path><path fill="none" d="M0 0h24v24H0z"></path></svg>

</div>

css:

.grouper {
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    width: 100%;
}

.borderhelper {
  border-style: solid;
  border-width: 1px;
  border-color: 0;
}

.icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    font-size: 24px;
}

p {
  margin: 0px;
}

fiddle.

However I am wondering: why would I need a flexbox in this case? It makes no sense as there's no flexing to happen, only aligning. Yet when I try to change display to "inline-block" the alignment fails.

paul23
  • 8,799
  • 12
  • 66
  • 149
  • the align fail because you need to use `vertical-align: middle;` with the icon not the container then you can remove inline-flex – Temani Afif Mar 19 '19 at 23:43
  • @TemaniAfif while it is a duplicate, the answers in the original posts aren't complete/working for my case: I had to add vertical-align: middle to both the paragraph as well as the image. This is visible once the paragraph has a different font size. ( https://jsfiddle.net/e4fqb0vx/ ). – paul23 Mar 20 '19 at 00:23
  • if the paragh has a bigger size you can remove both vertical-align and they will be aligned by default and the logic remain the same. You issue is adding vertical-align to the container while it need to be added to the child element (like in the duplicate). – Temani Afif Mar 20 '19 at 00:51

0 Answers0