如何使用引導程序垂直對齊中間？

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

小提琴

Answer 2

Bootstrap中有一些幫助程序類，您可以將其用於代碼。 請查看以下鏈接： http : //getbootstrap.com/css/#helper-classes-center

Answer 3

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <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> <div class="clearfix"></div> <a href="#"> <div class="glyphicon glyphicon-menu-down"></div> </a> </div> </div> 

你想要這樣嗎？