如何在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>