Fiddle

Question

我试图垂直对齐div右下方的图标：

<div class="row" style="border: 1px solid #000; width:50%">
    <div class="col-xs-11">Foo<br/><span style="font-style:italic">Bar</span></div>
    <div class="col-xs-1" style="vertical-align: bottom; display:inline-block">
        <i class="glyphicon glyphicon-chevron-down"></i>
    </div>
</div>

http://jsfiddle.net/EAUcW/640/

我已经阅读了建议使用display：table-cell或inline-block以及vertical-align：bottom的帖子。在这种特殊情况下，这似乎不起作用。那是为什么？

Answer 1

像这样：

Fiddle

<强> CSS

.bottom-right-icon {
    position: absolute;
    bottom: 0;
    right: 5px;
}

<强> HTML

<div class="row" style="border: 1px solid #000; width:50%; position: relative;">
    <div class="col-xs-11">Foo<br/><span style="font-style:italic">Bar</span></div>
    <div class="bottom-right-icon">
        <i class="glyphicon glyphicon-chevron-down"></i>
    </div>
</div>

请注意position: relative上添加了div.row，并从图标中删除了引导程序col-xs-1。

然后，其余的只是通过absolute定位将图标推到它所属的位置。

Answer 2

我相信SO上有答案，但找不到原帖。

以下内容应解决您的问题：

<div class="row" style="border: 1px solid #000; width:50%">
    <div class="col-xs-11" style="vertical-align: bottom; display:inline-block;float:none;">Foo
        <br/><span style="font-style:italic">Bar</span>
    </div>
    <div class="col-xs-1" style="vertical-align: middle; display:inline-block;float:none;"> <i class="glyphicon glyphicon-chevron-down"></i>
    </div>
</div>

Updated fiddle

另一个垂直对齐问题

2 个答案:

Fiddle