Vertical Align Text After Font Icon

How to center text vertically with a large font-awesome icon?

After considering all suggested options, the cleanest solution seems to be setting line-height and vertical-align everything:

See Jsfiddle Demo

CSS:

div {
    border: 1px solid #ccc;
    display: inline-block;
    height: 50px;
    margin: 60px;
    padding: 10px;
}
#text, #ico {
    line-height: 50px;
}

#ico {
    vertical-align: middle;
}

How to vertically align text with icon font?

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

Vertical Align Text After Font Icon

One of the ways would be to use inline-block display and middle align it - see demo below:

.wrapper > * {  display: inline-block;  vertical-align: middle;}.blue {  color: blue;}.white {  color: white;}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="col-md-4 wrapper">    <span class="fa-stack fa-2x">        <i class="fa fa-circle fa-stack-2x blue"></i>        <i class="fa fa-wifi fa-stack-1x white"></i>    </span>    <h4 class="blue">Free wifi</h4></div>

CSS vertically align center font awesome icon to text

Use i { vertical-align: middle; }

body {  font-family: Arial, 'sans-serif';}
a {  font-weight: 500;  font-size: 30px;  color: #000;}
i {  font-size: 12px !important;  font-weight: 300;  vertical-align: middle;}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /><div>  <a href="#">View Full Chart <i class="fa fa-chevron-right" aria-hidden="true"></i></a></div>

How to vertically center a font-awesome icon?

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>

How to align text and :before icon vertically center?

You can use a flexbox or grid to center the text en icon perfectly.
Below an example using flexbox.

.status {
    /* Added */
    display: flex;
    align-items: center;
}

.success {
    font-family: roboto;
    color: #27ae60;
    background: #e1e1e1;
    border-radius: 50px;
    padding: 0px 50px 0px 50px;
    font-size: 38px;
}

.success:before {
   font-family: FontAwesome; 
   content: "\f111"; 
   font-size: 10px;
   margin-right: 16px;
   color: #27ae60;
   /* vertical-align: middle; Removed */
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet">

<div class="status success">Purchuased</div>

How to vertically align icon font

You can try vertical-align: text-bottom or vertical-align: text-top, depending on which one you feel is more vertically centered.

For your shopping cart icon, it seems text-top is most vertically centered.

Example at: https://jsfiddle.net/p3g189bg/

Vertically align fontawesome icon with text in navbar

For any other HTML and CSS noob like me, it seems that p elements have margin by default. I have seen this question where it says that CSS 2.1 specification has a default style sheet for basic elements. Removing the bottom margin of the p element made it aligned with the icon.

Regarding horizontal space, DIVYIA BAID's suggestion to set a left margin is exactly what I was looking for.

---

Related Topics