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;

与table相关的vertical align相关内容应从所有地方删除。您可以通过在某些元素上强制表格布局来创建所需的布局，但由于您没有真正的表格和表格数据，因此这不是此处的方法。

注意：我们需要在边缘的小列上明确添加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是最好的选择。我为transition添加了line-height以便顺利对齐。

Fiddle

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

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

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

垂直对齐文本和fontawesome图标

4 个答案:

演示：

Fiddle