How to vertically align text with icon font?

Question

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">
  <a href="t" class="item"><i class="large home basic icon"></i><span class="nav-text"> Accueil</span></a>
  <a href="" class="item"><i class="large camera retro icon"></i><span class="nav-text"> Créations</span></a>
  <a class="item"><span class="nav-text">Qui-suis je </span><i class="large help basic icon"></i></a>
</div>

enter image description here

Any suggestion to fix it?

url content not working http://jsfiddle.net/Fractaliste/caFk4/11/ — Rakesh Roy, May 15 '17 at 11:52

Josh Crozier · Accepted Answer · 2020-09-16T18:10:46.660

161

In this scenario, since you are working with inline-level elements, you could add vertical-align: middle to the span elements for vertical centering:

.nav-text {
  vertical-align: middle;
}

Alternatively, you could set the display of the parent element to flex and set align-items to center for vertical centering:

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

edited Sep 16 '20 at 18:10

answered Mar 20 '14 at 21:23

Josh Crozier

233,099
56
391
304

1

From the question it seems that he wants to align the icons with the text instead of the text with the icons. – Arbel Mar 20 '14 at 21:29
4

@Arbel I'm not sure - the title says: *"align text with icons"* .. it's essentially the same thing though. – Josh Crozier Mar 20 '14 at 21:34
1

@Arbel All right I forgot to write if I needed a baseline or center alignment, but both proposal provide a **much more cleaner** result than my initial view so I consider your both answers as good one's. – Fractaliste Mar 20 '14 at 21:40

score 59 · Answer 2 · edited Aug 20 '18 at 08:27

59

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;
}

edited Aug 20 '18 at 08:27

Mathieu Dhondt

8,405
5
37
58

answered Aug 10 '16 at 10:53

sam

1,711
1
17
24

Is the idea to apply this rules to the `a` element? If it is, you are changing the `display` of the link so it's going to convert an inline element into a block one. I don't agree that this is the best solution. – Gorzas May 11 '20 at 10:10
@Gorzas In that case, I believe you could use `inline-flex` instead of just `flex` – Moon Cheesez Jun 20 '20 at 03:00

score 38 · Answer 3 · edited Apr 20 '18 at 09:36

38

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;
}

edited Apr 20 '18 at 09:36

Sunil Garg

14,608
25
132
189

answered Feb 07 '16 at 23:08

getsetbro

1,798
1
22
33

score 6 · Answer 4 · answered Oct 30 '20 at 19:11

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;
    }
}

line-height alone fixed for me. – Diego Jul 11 '22 at 18:26 — Diego, Jul 11 '22 at 18:26

score 5 · Answer 5 · answered Mar 20 '14 at 21:24

5

Add this to your CSS:

.menu i.large.icon,
.menu i.large.basic.icon {
    vertical-align:baseline;
}

DEMO

answered Mar 20 '14 at 21:24

Arbel

30,599
2
28
29

score 5 · Answer 6 · edited Mar 20 '14 at 22:11

5

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;
}

edited Mar 20 '14 at 22:11

almalki

4,595
26
30

answered Mar 20 '14 at 21:30

Marian Udrea

111
3

As far as I understand I should apply your CSS code on the `` tags? – Fractaliste Mar 20 '14 at 21:36
is an inline element , you might want to use a block element like
, because reacts weird to sizing css. the key here is to make the text element the same size as your picture, otherwise the center is going to be offset
– Marian Udrea Mar 20 '14 at 21:41
sry misread, yes you can do it on the tag too, same thing accross, line-height = element height, this will make everything align perfectly – Marian Udrea Mar 20 '14 at 21:51

score 3 · Answer 7 · answered Feb 04 '16 at 21:26

3

to center vertically and horizontally use this:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

answered Feb 04 '16 at 21:26

Alberto Lozano

39
1

score 1 · Answer 8 · answered Mar 30 '17 at 01:38

1

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)

answered Mar 30 '17 at 01:38

Tomer Almog

3,604
3
30
36

yooloobooy · Answer 9 · 2020-03-20T13:08:27.300

1

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;
}

Working example

edited Mar 20 '20 at 13:08

answered Mar 17 '20 at 15:03

yooloobooy

493
6
12

score 0 · Answer 10 · answered Mar 04 '16 at 14:01

0

You can use this property : vertical-align:middle;

.selector-class { 
    float:left;
    vertical-align:middle; 
}

answered Mar 04 '16 at 14:01

kishan Radadiya

788
6
14

How to vertically align text with icon font?

10 Answers10

Linked

Related