码
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="alert alert-danger" role="alert">
<i class="fa fa-exclamation-triangle fa-5x pull-left"></i> <strong>Warning:</strong> Lorem ipsum dolor sit amet,consectetur adipiscing elit. Vivamus augue eros,elementum sed scelerisque eget,rhoncus in orci. Vivamus ac tellus in lacus consectetur dapibus et sit amet odio. Proin iaculis porttitor nulla ac convallis. Nullam posuere egestas lectus,eu facilisis nulla egestas eu. Phasellus quis sapien elementum,volutpat enim id,suscipit tortor. Nam varius et turpis et dapibus. Donec placerat auctor mauris id mattis.
</div>
屏幕
题
我在Bootstrap警报中使用Font Awesome作为上面的代码和屏幕.我希望它可以使Font Awesome图标垂直居中,所有文本都在右边,即屏幕中显示的最后两行是右上方的行.
有没有办法在Font Awesome中执行此操作,还是应该使用Bootstrap columining来执行此操作？
解决方法
您可以使用引导列,然后垂直对齐它们：
HTML
<div class="alert alert-danger" role="alert">
<div class="row vertical-align">
<div class="col-xs-2">
<i class="fa fa-exclamation-triangle fa-5x"></i>
</div>
<div class="col-xs-10">
<strong>Warning:</strong> Lorem ipsum dolor sit amet,suscipit tortor. Nam varius et turpis et dapibus. Donec placerat auctor mauris id mattis.
</div>
</div>
</div>
CSS
.vertical-align {
display: flex;
align-items: center;
}
这是一个有效的bootply：
http://www.bootply.com/d9RijiwsF0
