I have a very basic HTML which mix plain text and icon fonts. The problem is that icons are not exactly rendered at the same height than the text:
<div class="ui menu">_x000D_
<a href="t" class="item"><i class="large home basic icon"></i><span class="nav-text"> Accueil</span></a>_x000D_
<a href="" class="item"><i class="large camera retro icon"></i><span class="nav-text"> Créations</span></a>_x000D_
<a class="item"><span class="nav-text">Qui-suis je </span><i class="large help basic icon"></i></a>_x000D_
</div>
_x000D_
Any suggestion to fix it?
This question is related to
html
css
fonts
font-awesome
vertical-align
can take a unit value so you can resort to that when needed:
{
display:inline-block;
vertical-align: 5px;
}
{
display:inline-block;
vertical-align: -5px;
}
Using CSS Grid
HTML
<div class="container">
<i class="fab fa-5x fa-file"></i>
<span>text</span>
</div>
CSS
.container {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
}
To expand on Marian Udrea's answer:
In my scenario, I was trying to align the text with a material icon. There's something weird about material icons that prevented it from being aligned. None of the answers were working, until I added the vertical-align
to the icon element, instead of the parent element.
So, if the icon is 24px
in height:
.parent {
line-height: 24px; // Same as icon height
i.material-icons { // Only if you're using material icons
display: inline-flex;
vertical-align: top;
}
}
Set line-height
to the vertical size of the picture, then do vertical-align:middle
like Josh said.
so if the picture is 20px
, you would have
{
line-height:20px;
font-size:14px;
vertical-align:middle;
}
to center vertically and horizontally use this:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
You can use this property : vertical-align:middle;
.selector-class {
float:left;
vertical-align:middle;
}
Adding to the spans
vertical-align:baseline;
Didn't work for me but
vertical-align:baseline;
vertical-align:-webkit-baseline-middle;
did work (tested on Chrome)
Add this to your CSS:
.menu i.large.icon,
.menu i.large.basic.icon {
vertical-align:baseline;
}
There are already a few answers here but I found flexbox to be the cleanest and least "hacky" solution:
parent-element {
display: flex;
align-items: center;
}
To support Safari < 8, Firefox < 21 and Internet Explorer < 10 (Use this polyfill to support IE8+9) you'll need vendor prefixes:
parent-element {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
Source: Stackoverflow.com