[英]How to vertically aligned to middle with bootstrap?
I am trying to create a layout to make two up and down arrows stacks on top of another. 我正在尝试创建一种布局,以使两个上下箭头堆叠在另一个之上。 Currently the arrows are aligned horizontally.
当前,箭头水平对齐。 I am not sure how to make it stacked and vertically aligned to middle along with the
Title
text. 我不确定如何将其与
Title
文本一起堆叠并垂直对齐到中间。 How do I do this? 我该怎么做呢?
<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 CSS
.wrapper {
padding:20px;
background-color:green;
color:white;
}
a div {
color:white;
}
https://jsfiddle.net/371yuk1r/2/ https://jsfiddle.net/371yuk1r/2/
Thanks a lot! 非常感谢!
One solution without using class from bootstrap
is to add display: table-row;
一种不使用
bootstrap
类的解决方案是添加display: table-row;
to a
element like: 像这样
a
元素:
html 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 CSS
.arrowVert {
display: table-row;
}
There are some helper classes in Bootstrap, which you can use for your code. Bootstrap中有一些帮助程序类,您可以将其用于代码。 Check out these link please: http://getbootstrap.com/css/#helper-classes-center
请查看以下链接: http : //getbootstrap.com/css/#helper-classes-center
<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>
You want like this ? 你想要这样吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.