Question

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

在Twitter Bootstrap中我有一个警报行，但右侧的钟形图标与左侧的文本没有垂直对齐。图标显示低于文本。我尝试了vertical-align:middle; .row line-height等。我还需要解决方案在移动设备屏幕上做出响应。

您可以在小提琴中看到我的选项：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/

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

内联HTML元素的垂直对齐

1 个答案: