内联 HTML 元素的垂直对齐答案

【问题标题】：Vertical align of inline HTML elements内联 HTML 元素的垂直对齐
【发布时间】：2014-01-22 01:12:03
【问题描述】：

我知道有很多关于我无法解决的内联元素的问题（1,2,3,4,5）。

在 Twitter Bootstrap 中，我有一个警告行，但右侧的铃铛图标未与左侧的文本垂直对齐。图标显示低于文本。我试过vertical-align:middle;.rowline-height等。我还需要解决方案在移动屏幕上响应。

你可以在 fiddle 中看到我的试用：http://jsfiddle.net/mavent/DdLED/37/

<div class="alert alert-warning ">Today many things happened <span class="badge badge-info">121</span>
    <div class="pull-right"><a class="btn btn-lg" data-toggle="collapse" data-target="#myTable"><i class="glyphicon glyphicon-bell"></i></a>
    </div>
</div>

编辑：解决方案：
我解决了小提琴中的示例 8 之类的问题：http://jsfiddle.net/mavent/DdLED/45/

【问题讨论】：

试试 display:inline-block;与垂直对齐。

标签： html css twitter-bootstrap

【解决方案1】：

这对你有用吗？（我知道，有点黑）

[CSS]

.bring_it_up {
    margin-top: -3px;
}

[HTML]

<!-- part 8 -->
<div class="alert alert-warning border2 "><span class="border">Today many things happened Part 8</span><span class="border  badge badge-info">121</span>
 <a class="bring_it_up no_padding pull-right btn btn-lg" data-toggle="collapse" data-target="#myTable"><i class="no_padding glyphicon glyphicon-bell"></i>
</a>
</div>

【讨论】：