css - 文本和 fontawesome 图标的垂直对齐

Question

我想用 bootstrap 创建一个自定义警告框。但是文本和图标的垂直对齐不起作用。所以这是代码:

HTML:

<div class="alert-box alert-box-info text-center clearfix" style="display: inline-block;">
     <i class="fa fa-info text-info pull-left"></i>
     <div class="text text-info"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></div>
</div>

CSS:

.alert-box
{
    margin: 20px 0;
    border: 1px solid #dbdbdb;
    display: inline-block;
    height: 100px;
}
.alert-box .fa {
    font-size: 40px;
    padding-left: 20px;
    display: table-cell;
    vertical-align: middle;
}
.alert-box .text {
    margin: 0px;
    display: table-cell;
    width: 100%;
    vertical-align: middle;
}

.alert-box-info
{
    background: #f4f8fa;
    border-bottom: 3px solid #5bc0de;
}
.alert-box-info h4
{
    color: #5bc0de;
}

jsFiddle Demo

谁能告诉我，为什么垂直对齐不起作用，我该如何解决？

Answer 1

由于 the answer to this question，答案已完全更新.

---

您的布局应该可以通过 flex-box 实现。只需在容器上添加:

display: flex;
align-items:center;

任何与 vertical align 相关的 table 都应该从所有地方移除。您可以通过在某些元素上强制使用表格布局来创建所需的布局，但这不是此处的方法，因为您没有真正的表格和表格数据。

注意:我们需要在边缘的小列上显式添加 flex-shrink: 0，因为 Chrome 错误(仅针对 FF 34 修复)会导致不正确的收缩。根据规范，默认情况下不应发生任何收缩。

演示:

.alert-box
{
    margin: 20px;
	border: 1px solid #dbdbdb;
	display: flex;
    align-items:center;
    height: 100px
}
.alert-box .fa {
	font-size: 40px;
    padding-left: 20px;
    flex-shrink: 0;
}
.alert-box .text {
	margin: 0px;
    flex-grow: 1;
}

.alert-box-info
{
    background: #f4f8fa;
    border-bottom: 3px solid #5bc0de;
}
.alert-box-info h4
{
    color: #5bc0de;
}
.alert-btn {
	flex-shrink: 0;
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="alert-box alert-box-info text-center clearfix">
	<i class="fa fa-info text-info"></i>
	<div class="text text-info"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></div>
    <div class="alert-btn"><a href="google.com" class="btn btn-lg btn-info">Test</a></div>
</div>