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

Answer 2

Bootstrap中有一些辅助类，您可以将它们用于代码。请查看以下链接：http://getbootstrap.com/css/#helper-classes-center

Answer 3

＆＃13;

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

＆＃13;

你想要这样吗？

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

3 个答案: