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

Question

我正在尝试创建一个布局，使两个上下箭头堆叠在另一个之上。目前箭头水平对齐。我不确定如何使其与 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/

非常感谢!

Answer 1

不使用 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