How to make fontawesome icon to its parent's center

Question

I use following code:

<div style="width:60px; height:60px; background-color: lightgrey;">
  <a class="" href="javascript:void(0)" style="color: black; width: inherit; height: inherit;">
    <i class="fa fa-lg fa-play" aria-hidden="true" style="width: inherit; height: inherit;"></i>
  </a>
</div>

and I get following:

How to make play icon to grey block center?

Possible duplicate of [CSS Center text (Horizontal and Vertical) inside a DIV block](http://stackoverflow.com/questions/5703552/css-center-text-horizontal-and-vertical-inside-a-div-block) — Joe Lissner, May 02 '17 at 15:06

score 0 · Answer 1 · answered May 02 '17 at 15:09

You will need to set the text-align property of the i element to text-align: center; and then set the container of that to line-height: 60px; The line=height should match the height of the outer container.

i {
  text-align: center;  
}
a {
  line-height: 60px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div style="width:60px; height:60px; background-color: lightgrey;">
  <a class="" href="javascript:void(0)" style="color: black; width: inherit; height: inherit;">
    <i class="fa fa-lg fa-play" aria-hidden="true" style="width: inherit; height: inherit;"></i>
  </a>
</div>

How to make fontawesome icon to its parent's center

1 Answers1