html - 如何使用 bootstrap 垂直对齐中间？

我正在尝试创建一种布局，以使两个上下箭头堆叠在另一个之上。当前，箭头水平对齐。我不确定如何将其堆叠并与Title文本垂直对齐到中间。我该怎么做呢？

<div class="row">
    <div class="col-xs-8">Title</div>
    <div class="col-xs-4">
        <a href="">
            <div class="glyphicon glyphicon-menu-up"></div>
        </a>
        <a href="">
            <div class="glyphicon glyphicon-menu-down"></div>
        </a>
    </div>
</div>

的CSS

.wrapper {
    padding:20px;
    background-color:green;
    color:white;
}

a div {
    color:white;
}

https://jsfiddle.net/371yuk1r/2/

非常感谢！

最佳答案

不使用bootstrap中的类的一种解决方案是将display: table-row;添加到a元素，例如：

html

<div class="row">
    <div class="col-xs-8">Title</div>
    <div class="col-xs-4">
        <a href="" class="arrowVert">
            <div class="glyphicon glyphicon-menu-up"></div>
        </a>
        <a href="">
            <div class="glyphicon glyphicon-menu-down"></div>
        </a>
    </div>
</div>

的CSS

.arrowVert {
    display: table-row;
}

fiddle

关于html - 如何使用 bootstrap 垂直对齐中间？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30884395/