CODEWITHSUNDEEP
cssvertical-alignmentpseudo-element
Dacobah
Dacobah

Reputation: 789

How to vertically center content in before or after in CSS

I'm currently having some troubles making a redesign of Bootstrap alerts. I don't think it's is relative to Font Awesome, neither to Bootstrap.

The idea is to get a left side on a block with an icon added in the before. It works but the icon is not vertically centered. It become even much uglier when the right side contains multiple lines.

In two images :

This is what I get enter image description here

This is what I want enter image description here

Run the code snippet to see what I achieve so far.

.alert {
  position: relative;
  background: #3498db;
  border: none;
  padding: 15px 20px 15px 120px;
  text-align: left;
}

.alert:before {
  content: "\f129";
  font-family: FontAwesome;
  display: block;
  width: 100px; 
  height: 100%; 
  position: absolute;
  top: 0;
  left: 0;
  background: #34495e;
  text-align: center;
  color: #fff;
  font-size: 2.5em;
  vertical-align: middle;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="alert">
  <p>
    Intellectum est enim mihi quidem in multis, et maxime in me ipso.<br /> 
    Ille quidem fructum omnis ante actae vitae hodierno die maximum cepit, cum summo consensu senatus.<br />
    Ex quo profecto intellegis quanta in dato beneficio sit laus.
  </p>
</div>

Upvotes: 1

Views: 806

Answers (1)

Aaron
Aaron

Reputation: 10430

Using display: table; and table-cell works with vertical align property.

.alert {
  background: #3498db;
  border: none;
  text-align: left;
  display: table; /* Display table */
  width: 100%;
}
.alert:before {
  content: "\f129";
  font-family: FontAwesome;
  display: table-cell; /* Display Table-Cell */
  width: 100px;
  background: #34495e;
  text-align: center;
  color: #fff;
  font-size: 2.5em;
  vertical-align: middle;
}
.alert > p {
  padding: 15px 20px 15px 20px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="alert">
  <p>
    Intellectum est enim mihi quidem in multis, et maxime in me ipso.
    <br />Ille quidem fructum omnis ante actae vitae hodierno die maximum cepit, cum summo consensu senatus.
    <br />Ex quo profecto intellegis quanta in dato beneficio sit laus.
  </p>
</div>

Upvotes: 6

Related Questions