文本和字体图标的垂直对齐

Question

我想创建一个带有引导程序的自定义警报框。 但是文本和图标的垂直对齐不起作用。代码如下：

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>

Answer 2

最简单的方法是改变div的样式：

<div class="alert-box alert-box-info text-center clearfix" style="display: table-cell;  vertical-align: middle;">

Answer 3

JavaScript 是这里的最佳选择。我为line-height 添加了transition 以实现平滑对齐。

Fiddle

function doMath() {
  document.getElementsByClassName('fa-info')[0].style.lineHeight = document.getElementsByClassName('text')[0].clientHeight + 'px';
}
doMath();
window.onresize = doMath;

.alert-box {
  margin: 20px 0;
  border: 1px solid #dbdbdb;
  display: table;
}
.alert-box .fa {
  font-size: 40px;
  padding-left: 20px;
  display: table-cell;
  transition: line-height 0.1s;
}
.alert-box .text {
  padding: 20px;
  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;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<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>

Answer 4

如果文本只有 1 行，则垂直对齐文本的最简单方法是 line-height 属性：

.alert-box .fa {
    font-size: 40px;
    padding-left: 20px;
    line-height: 100px;
}

http://jsfiddle.net/Clear/qnj3ohqh/15/