[英]Bootstrap how to center vertical
I have a question regarding centering row vertically! 我有一个关于垂直居中排的问题!
I have here a simple html, with use of bootstrap 3: 我在这里有一个简单的HTML,使用了bootstrap 3:
<div class="container">
<div class="row">
<div class="col-sm-12 text-center" style="padding:5 20 5 20;">
Some text text text text text .....
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="thumbnail">
<img data-src="holder.js/460x308">
</div>
</div>
</div>
</div>
I would like to center this container or row ... doesn't matter. 我想将此容器或行居中...没关系。
So imagine i have a window which is 500px x 500px 想象一下我有一个500px x 500px的窗口
I would like to pisition it in the middle of it, not on top (what is now the case) or bottom, but in center 我想在中间插入它,而不是在上面(现在是这种情况)或在下面,而是在中间
PS: http://jsfiddle.net/e89TE/ PS: http : //jsfiddle.net/e89TE/
try this css: 试试这个CSS:
.container{
display:table;
}
.row{
display: table-cell;
vertical-align: middle;
}
should work. 应该管用。 ps.
PS。 post a fiddle next time
下次张贴小提琴
First thing you will need to do if you want the type on TOP of the image is make the image a background image: 如果要使图像的TOP类型成为背景图像,您需要做的第一件事是:
<div class="col-sm-12 text-center">
<div class="foo">
Some text text text text text …..
</div>
</div>
The css 的CSS
.foo {
background-image:url("holder.js/460x308");
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.