Twitter Bootstrap 3垂直对齐
问题描述:
我正在使用Bootstrap 3 - 并且有两列内容。Twitter Bootstrap 3垂直对齐
第一列是图像。 第二栏是一些文字。
现在我想要做的是使“行”占据浏览器窗口的整个高度,并将图像放在第一列中,并将第二列中的文本水平和垂直居中。我已经尝试了所有来自*的解决方案,但没有运气。
在这里,我使用的代码:
<div class="container" style="height:100%;">
<div class="row">
<div class="col-sm-6"> <img src="img/logo_frontpage.png" class="img-responsive center-block" style="height:70%; width:70%" alt=""> </div> <!-- should be vertical centre -->
<div class="col-sm-6">
<!-- start -->
<div id="start" style="display:block;"> <!-- should be vertical centre -->
<h1 class="text-center">Welcome!</h1>
<p class="text-venter">to</p>
<h3 class="text-center" >my site<br /></h3>
</div>
</div>
</div>
</div>
我有麻烦使容器充满整个屏幕区域,并垂直居中的两列。
答
*不是CSS技术的唯一来源。您可以在CSS-Tricks.com和其他地方找到大量信息。 DEMO:http://jsbin.com/bayoli/1/
CSS
@media (min-width:768px) {
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.container.my-container {
display: table;
height: 100%;
}
.my-container .row {
display: table-cell;
height: 100%;
}
.my-container .col-sm-6 {
display: table-cell;
border: 5px dashed pink;
height: 100%;
}
.my-container .col-sm-6 .inner {
display: table;
height: 100%;
width:100%;
}
.my-container .col-sm-6 .inner > div {
display: table-cell;
vertical-align: middle;
width: 100%:;
}
}
/* fluid image */
img.img-full-width {width:100%;}
HTML
<div class="container my-container">
<div class="row">
<div class="col-sm-6">
<div class="inner">
<div>
<img src="http://placehold.it/600x300/555555/FFFFFF&text=image+1" class="img-full-width img-responsive" />
</div>
</div>
</div>
<div class="col-sm-6 one">
<div class="inner">
<div>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>
</div>
</div>
</div>
</div>
</div>