CSS: Vertically aligning inline-block element in a line of text - css

Question

I have an inline-block element put inside a line of text:
.icon element has vertical-align: middle;, which results in this picture:
As you can see, the icon is not aligned with the middle of the text, it is a little bit lower, whilst the text alignment looks OK. The .button-content has line-height equal to the height of the parent. I tried to wrap the text elements around the icon:
And got this result:
The coin went up a little relatively to the text, whereas the whole line went down a pixel or two.
What is the proper way to align an inline-block element inside a lign of text? And what are these text chunks and how do they behave? Do they have display:inline; or something, because I can't see their properties in the DevTools?

Answer 1

Vertical-align doesn't work like you would think it would. It's used in HTML tables, but doesn't work in divs. It's been a pain for a while. Luckily, nowadays you can achieve this easily with flexbox.
To achieve this, wrap your two bits of copy in individual span elements, so your structure looks like:
<div class="button-content">
<span>buy for</span>
<div class="icon"></div>
<span>1000</span>
</div>
Then your css should look like this:
.button-content{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 130px;
}
Or if you can't support flexbox, your .button-content can be set to display: table-cell; and the vertical-align: middle; should work.
I strongly recommend flexbox.

Answer 2

Unless your span elements are styled, the result will be the same with or without them.
With vertical-align: middle; position: relative; top: -1px; you can get some nice results.
.icon {
display: inline-block;
width: 10px;
height: 10px;
background: blue
}
.top {
vertical-align: top;
}
.bottom {
vertical-align: bottom;
}
.middle {
vertical-align: middle;
}
.moveup {
position: relative;
top: -1px;
}
<div class="button">
<span>Buy for</span>
<div class="icon"></div>
<span>1000</span>
</div>
<div class="button">
Buy for
<div class="icon"></div>
1000
</div>
<hr>
<div class="button">
Buy for
<div class="icon top"></div>
1000 vertical-align: top;
</div>
<div class="button">
Buy for
<div class="icon bottom"></div>
1000 vertical-align: bottom;
</div>
<div class="button">
Buy for
<div class="icon middle"></div>
1000 vertical-align: middle;
</div>
<hr>
<div class="button">
Buy for
<div class="icon middle moveup"></div>
1000 vertical-align: middle; top: -1px;
</div>

Answer 3

Simple answer
I have not seen a simple answer yet, so I'll just post mine:
.icon_tpye-gold {
vertical-align: -5px; /* << or another value to center the inline element vertically */
}
A suggestion: be consistent with class names (so icon_type-gold is clearer when named icon_type_gold or icon-type-gold, this looks less sloppy)

Answer 4

The icon actually IS aligned vertically, but relating to the complete line-height, including the space below the baseline reserved for the descenders of characters like y, g, p etc . (also the y in your button Text)
You can try to add position: relative; and bottom: 3px; (try different values) to that inline-block to move it up.