How to vertically center a font-awesome icon?

Question

In the following example, I would like to center the fa-plus icon inside the circle.

What I notice is the glyph is aligned with the top of the <i> tag. However I have added everything that should be needed to align it vertically:

https://jsfiddle.net/x2n13p4e/2/

HTML:

<a class="btn icon-btn btn-success" href="#">
    <i class="btn-glyphicon text-success fa fa-plus"></i>
    Add
</a>

CSS:

.btn-glyphicon {
    padding: 3px;
    background: #ffffff;
    margin-right: 4px;
    border-radius: 50px;
    width: 1.5em;
    height: 1.5em;
    text-align: center;
    vertical-align:middle !important;
    align-items:center;
}

.icon-btn {
    padding: 1px 15px 3px 2px;
    border-radius: 50px;
    text-align: center;
    vertical-align:middle;
}

@mpsbhat Not really a solution because if I force a `width` of `2em`, I therefore need to set a `height`. — nowox, Jul 21 '18 at 12:32

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

With position: relative, you make the icon a container for absolute positioned items inside of it or for pseudo classes, like :before or :after.

A absolute positioned item inside of a relative positioned container can be centered horizontally and vertically as follows:

.center-horizontally-and-vertically {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

how-to-center-an-element-horizontally-and-vertically

Example

.btn-glyphicon {
  position: relative;
  padding: 3px;
  background: #ffffff;
  margin-right: 4px;
  border-radius: 50px;
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  vertical-align: middle !important;
  align-items: center;
}

.btn-glyphicon:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.icon-btn {
  padding: 1px 15px 3px 2px;
  border-radius: 50px;
  text-align: center;
  vertical-align: middle;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<a class="btn icon-btn btn-success" href="#">
  <i class="btn-glyphicon text-success fa fa-plus"></i> Add
</a>

JSFiddle

It works, could you explain why your solution works? – nowox Jul 21 '18 at 13:21 — nowox, Jul 21 '18 at 13:21

score 1 · Answer 2 · answered Jul 21 '18 at 12:39

1

Instead of

width: 1.5em;
height: 1.5em;

try it with:

width: 0 auto;
padding: 5px;

https://jsfiddle.net/RezaScript/Lz615auc/2/

answered Jul 21 '18 at 12:39

Reza Saadati

5,018
4
27
64

In your `jsfiddle`, the circle is not a circle anymore :( – nowox Jul 21 '18 at 12:54
@nowox that is because of `padding: 5px`. You could play with it e.g. use `padding: 20px 23px;`. It also depends what the font size is. So try to work with `font-size` as well. https://jsfiddle.net/RezaScript/Lz615auc/7/ – Reza Saadati Jul 21 '18 at 13:03

score 0 · Answer 3 · edited Jul 21 '18 at 14:06

0

Try to use line-height property in .btn-glyphicon class.

.btn-glyphicon {
  padding: 3px;
  background: #ffffff;
  margin-right: 4px;
  border-radius: 50px;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  text-align: center;
  vertical-align:middle !important;
  align-items:center;
}

edited Jul 21 '18 at 14:06

Reza Saadati

5,018
4
27
64

answered Jul 21 '18 at 12:47

OM Tiwari

75
2

@nowox remove `padding: 3x;` for `line-height` to work well – Mehravish Temkar Jul 21 '18 at 12:58

How to vertically center a font-awesome icon?

3 Answers3

Example