Другая вертикальная центровка проблема

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/

Я читал сообщения, предполагающие с помощью дисплея: таблица-клеток или встроенный блок, а также выравнивание по вертикали: внизу. В данном конкретном случае это не работает. Почему это?

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