如何垂直居中一个字体真棒图标？

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

Answer 1

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

Answer 2

Instead of

width: 1.5em;
height: 1.5em;

try it with:

width: 0 auto;
padding: 5px;

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

Answer 3

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