Twitter Bootstrap 3垂直对齐

Question

我正在使用Bootstrap 3 - 并且有两列内容。

第一列是图像。 第二栏是一些文字。

现在我想要做的是使“行”占据浏览器窗口的整个高度，并将图像放在第一列中，并将第二列中的文本水平和垂直居中。我已经尝试了所有来自Stackoverflow的解决方案，但没有运气。

在这里，我使用的代码：

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

我有麻烦使容器充满整个屏幕区域，并垂直居中的两列。

Answer 1

Stackoverflow不是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>