如何在 CSS 之前或之后垂直居中内容

Question

我目前在重新设计 Bootstrap 警报时遇到了一些麻烦。我认为它与 Font Awesome 无关，也与 Bootstrap 无关。

想法是在之前添加一个带有图标的块的左侧。它可以工作，但是 图标不是垂直居中的。当右侧包含多行时，它变得更加丑陋。

在两张图片中：

这就是我得到的

这就是我想要的

运行代码片段，看看我到目前为止取得了什么。

.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>

Answer 1

使用 display: table; 和 table-cell 与垂直对齐一起工作属性。

.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>

如何在 CSS 之前或之后垂直居中内容

How to vertically center content in before or after in CSS

css

vertical-alignment

pseudo-element