Question

我有两个span元素，我试图垂直居中，我设法通过匹配行高和父元素的高度来居中左边元素，但是右边的元素有一个浮动样式： right不受行高变化的影响，是否有任何原因，我如何垂直居中浮动元素呢？

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

只有元素的内联内容受设置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/

CSS line-height不影响float：right元素

1 个答案: