How can I fix the alignment of my inline-flex icons?

Question

I'm hoping there's just something major I'm missing here with inline-flex.

I'm using display: inline-flex and the order of the 2 items inside of the element change how the element aligns with its siblings.

In this scenario I have 3 anchor tags each with some text and an "icon" element. On the 2nd anchor tag I've put the "icon" element as the first child which causes the element to not align with its sibling anchor tags.

.item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
}

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: red;
}

<a href="#" class="item">
  item
  <span class="icon"></span>
</a>
<a href="#" class="item">
  <span class="icon"></span>
  item
</a>
<a href="#" class="item">
  item
  <span class="icon"></span>
</a>

Here's a CodePen that shows the issue: https://codepen.io/Fernker/pen/BaVjvXB

By any chance could you... just move "item" before the `` in the middle link? Or does it have to be after? — TylerH, Nov 01 '22 at 21:40

TylerH · Accepted Answer · 2022-11-01T21:48:20.300

3

Here are two options:

Set vertical-align on the .item {} selector; you can use the value bottom, middle, or top... whichever one fits your needs.
Transpose the position of the "item" text and the <span> in your second/middle <a> link.

edited Nov 01 '22 at 21:48

answered Nov 01 '22 at 21:45

TylerH

20,799
66
75
101

Interesting, vertical-align: middle seems to fix it but vertical-align: baseline doesn't align them on the same baseline (I would expect them to have the same baseline). – Fernker Nov 01 '22 at 21:47
@Fernker Oops, I meant `bottom`, not `baseline`. – TylerH Nov 01 '22 at 21:48
oh yeah they align with bottom. Any ideas why they have different baselines though? – Fernker Nov 01 '22 at 21:49
@Fernker I believe it is the baseline (the bottom of the object; `bottom` would refer to the bottom of the objects container) of the *first* element in the object. In the second ``, your image is first, and its baseline is below the baseline of the "item" text. In the 1st and 3rd ``s, the "item" text is first. So, the baseline of the image in the second `` is what gets aligned with the baseline of the "item" text in the other `` containers. – TylerH Nov 01 '22 at 21:54
See [this image](https://i.stack.imgur.com/bExUf.png) to illustrate it. I drew a line in MS Paint at the baseline of the text from the first `` (and third) and you can see how it aligns with the bottom of the red image of the second ``. – TylerH Nov 01 '22 at 21:55
Thanks for the explanation. I hadn't ever stopped and considered what the baseline would be when there are multiple items in a given element. Guess I learned something new today, thank you! – Fernker Nov 01 '22 at 21:56
1

For further reading on baseline (if you want to dive deeper), see https://stackoverflow.com/questions/43996242/whats-the-deal-with-vertical-align-baseline – TylerH Nov 01 '22 at 21:56

Chris Schober · Answer 2 · 2022-11-02T02:37:25.163

1

I would wrap them in a div and use align-items:center in this div. Im not a big fan of vertical-align. There can be some unwanted issues / side effects. Of course it depends where and how you use it, but some issues are described here: https://christopheraue.net/design/why-vertical-align-is-not-working

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

.item {
  display: inline-flex;
  gap: 5px;
}

.icon {
  display:inline-block;
  width: 20px;
  height: 20px;
  background: red;
}

<div class="container">
  <a href="#" class="item">
    item
    <span class="icon"></span>
  </a>
  <a href="#" class="item">
    <span class="icon"></span>
    item
  </a>
  <a href="#" class="item">
    item
    <span class="icon"></span>
  </a>
</div>

edited Nov 02 '22 at 02:37

answered Nov 02 '22 at 02:32

Chris Schober

176
5

This is a valid solution for sure, although if your answer is essentially "don't use `vertical-align` because it doesn't always work", it would be better to mention why/where it doesn't work _in the answer_ rather than just linking to a 3rd party site. Especially given there's already an answer showing it _does_ work for the code OP provided. – TylerH Nov 02 '22 at 13:11
I didn't advice to not use vertical-align. Just mentioned that there can be issues using it and I've provided a source where its explained why. And since the question already uses flex box this is the best answer in my opinion. – Chris Schober Nov 07 '22 at 15:55

How can I fix the alignment of my inline-flex icons?

2 Answers2