How to align icon to the center in an tag of fixed height

Question

I tried adding some padding-top, but is there a way to automate this? I couldn't find any similar questions.

i{
  background: red;
  height: 100px;
}

<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />

<i class="fa fa-link"></i>

but why you don't consider the icon as the `i` element and use another wrapper ? there is no logic doing so — Temani Afif, Apr 12 '18 at 12:41
@TemaniAfif that's what I'd done before, aligned it inside a parent div tag, but I thought there might be an easier way. — Mav, Apr 12 '18 at 12:47
it's about *easier* way ... the `i` is the icon element, why doing so and then trying to align it's pseudo element ... your don't have to mess up with the i element, you will simply create a lot issue — Temani Afif, Apr 12 '18 at 12:49
It's for a really specific scenario. While I won't go into all the details, it's a vuejs component with a complicated structure, and a container element would've proved to be more challenging. — Mav, Apr 12 '18 at 12:52
so the easiest way here without the complication i see below is to set `line-height` the same as height — Temani Afif, Apr 12 '18 at 12:55
Yeah, either that or the pseudo element. Having said that, why has this been marked as duplicate? The three questions attached don't address the same issue. — Mav, Apr 12 '18 at 13:00
simply because vertical-alignment is a common issue ... and ALL the question address the issue, because the content of a pseudo element is a text so here you want to "vertical-align a text within a container" .. and you will find the same answer below but better explained — Temani Afif, Apr 12 '18 at 13:01

score 2 · Accepted Answer · answered Apr 12 '18 at 12:45

2

hope this helps you out. Kindly check the below snippet.

i{
  background: red;
  height: 100px;
  position: relative;
}

i:before {
position: relative;
top: 50%;
    transform: translateY(-50%);
    display: block;
}

<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />

<i class="fa fa-link"></i>

answered Apr 12 '18 at 12:45

Anmol Sandal

1,468
1
9
16

1

i guess position:absolute is more correct ... it work here because you have no padding, but add padding to the i and you will see – Temani Afif Apr 12 '18 at 12:54

score 0 · Answer 2 · answered Apr 12 '18 at 12:45

0

Try This

i {
    background: red;
    height: 100px;
    display: flex !important;
    flex-flow: row wrap;
    width: 20px;
    justify-content: center;
    align-items: center;
    padding: 0;
}

answered Apr 12 '18 at 12:45

Rakesh Shriwas

611
2
7
15

score 0 · Answer 3 · answered Apr 12 '18 at 12:47

You could use table cell, and vertical align middle the advantage of using this is that old browser support table-cell property... other solution would be using flexbox..

i{
  background: red;
  height: 100px;
}
i.fa {
display:table-cell;
vertical-align: middle;
}

<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />

<i class="fa fa-link"></i>

Tanveer Ahmad · Answer 4 · 2018-04-12T12:57:24.427

0

No need to add height. you can apply following css:

i{
  background: red;
  padding:8px;
}

And if you want keep height there than you can use following:

i{
     background: red;
     height:100px;
     display: table-cell !important;
     vertical-align: middle;
 }

edited Apr 12 '18 at 12:57

answered Apr 12 '18 at 12:47

Tanveer Ahmad

84
1
1
7

score -1 · Answer 5 · answered Apr 12 '18 at 12:45

You can change your CSS like below:

i{
  background: red;
  height: 100px;
}
i:before{
  display: inline-block;
  margin: 40px 0;
}

<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />

<i class="fa fa-link"></i>

How to align icon to the center in an tag of fixed height

5 Answers5