CSS-высота строки, не влияющая на float: правый элемент

Question

У меня есть два элемента span, которые я пытаюсь вертикально центрировать, и мне удалось центрировать левый элемент, сопоставляя высоту линии с высотой родительского элемента правый элемент, который имеет стиль float: на правое не влияет изменение высоты строки, есть ли причина для этого и как я могу вертикально центрировать плавающий элемент?

HTML

<div class='panel panel-default remove-radius slideshow-holder'> 
    <span id='slideshow_prev_button' class='glyphicon glyphicon-chevron-left'></span> 
    <span id='slideshow_next_button' class='glyphicon glyphicon-chevron-right float-right'></span> 
    <div class='panel-body'> 
    </div> 
</div> 

CSS

.slideshow-holder 
{ 
    background:url('../res/images/abwallpaper.jpg'); 
    height:300px; 
    line-height:300px; 
} 

Примечание: Я также использую встроенный контент Bootstrap

Answer 1

Just элемента зависит от настройки line-height. Плавающий элемент - block, вот почему line-height не работает.

Комплект line-height стрелкам, а не обертке. Я установил float как на span с, когда вы установили float: right во второй, а стрелка влево останется как элемент inline, следующая стрелка будет на несколько пикселей ниже.

.slideshow-holder { 
    background:url('../res/images/abwallpaper.jpg'); 
    height:300px; 
} 

.slideshow-holder span {float: left; line-height: 300px;} 
#slideshow_next_button {float: right;} 

http://jsfiddle.net/cnntwodL/1/