CSS线-高度不影响浮动:正确的元素

Question

我有两个正试图垂直居中的span元素，我设法通过将行高与父元素的高度相匹配来对左元素进行居中，但是右边的元素具有浮动的风格:右不受行高变化的影响，这有什么原因吗?我如何垂直对浮动元素进行居中呢？

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;
}

注意:我还使用了引导程序

Answer 1

设置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/