如何垂直居中引导3行和列？

我已经尝试了几个发布的解决方案来获得这个工作，但似乎无法做到这一点。我在这里做错了什么？如何垂直居中引导3行和列？

我想让IMG，P & BUTTON元素在它们的div中垂直居中，而不是堆叠在一起。

这是我到目前为止有：

<div class="container rider"> 

    <div class="row"> 

     <div> 
      <div class="col-sm-4 col-xs-12 left"> 
       <img src="/assets/images/tech-tips.png" /> 
       <p>Lorem ipsum dolor sit amet, adipiscing elit.</p> 
       <button class="btn btn-default btn-small">go</button> 
      </div> 
     </div> 


     <div> 
      <div class="col-sm-4 col-xs-12 center"> 
       <img src="/assets/images/tech-tips.png" /> 
       <p>Lorem ipsum dolor sit amet, adipiscing elit.</p> 
       <button class="btn btn-default btn-small">go</button> 
      </div> 
     </div> 


     <div> 
      <div class="col-sm-4 col-xs-12 right"> 
       <img src="/assets/images/tech-tips.png" /> 
       <p>Lorem ipsum dolor sit amet, adipiscing elit.</p> 
       <button class="btn btn-default btn-small">go</button> 
      </div> 
     </div> 

    </div> 

</div>

而CSS覆盖股票自举3 CSS。

.rider > .row , .rider > .row > div, .rider > .row > div > div { 
    vertical-align:middle; 
    } 

.rider img, .rider p, .rider button { 
    display:inline-block; 
} 
.rider img { 
    float:left; 
} 
.rider p { 
    width: 140px; 
    margin: 0; 
    padding: 0; 
    } 

.rider button { 
    float:right; 
}

*注：IMG，P & BUTTON标签应该是在每列彼此的旁边，而不是堆积。

来源

2014-03-04 Sean Kimball

尝试添加空白：NOWRAP;以及 – MightySchmoePong

我无法从您的代码片断中看出来，但是如果您的图片太大，则会将段落和按钮元素强制到下一行。你可以创建一个[jsFiddle]（http://jsfiddle.com）的图像URL位置？ –

您的学校不应该包含其他科室。此外，这个问题之前已经被问过很多次了：http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3 – ZimSystem

这里是一个PEN，我创建了一个前阵子一个类似Question。我用3种不同的方法在中间垂直对齐。

translate
display:table-cell
line-height

来源

2014-03-04 22:48:51

只需使用下面的CSS。

.rider img, 
.rider p, 
.rider button { 
    display: inline-block; 
    vertical-align: middle; 
}

来源

2014-03-05 01:16:58 Iqbal

使用Bootstrap的media-middle类。这样你可以精简额外的CSS。

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-4 col-xs-12"> 
      <div class="media"> 
       <div class="media-left"> 
        <img src="//placehold.it/150"> 
       </div> 
       <div class="media-body media-middle"> 
        <p>Lorem ipsum dolor sit amet, adipiscing elit.</p> 
        <button class="btn btn-default btn-small">go</button> 
       </div> 
      </div> 
     </div> 
     <div class="col-sm-4 col-xs-12"> 
      <div class="media"> 
       <div class="media-left"> 
        <img src="//placehold.it/150"> 
       </div> 
       <div class="media-body media-middle"> 
        <p>Lorem ipsum dolor sit amet, adipiscing elit.</p> 
        <button class="btn btn-default btn-small">go</button> 
       </div> 
      </div> 
     </div> 
     <div class="col-sm-4 col-xs-12"> 
      <div class="media"> 
       <div class="media-left"> 
        <img src="//placehold.it/150"> 
       </div> 
       <div class="media-body media-middle"> 
        <p>Lorem ipsum dolor sit amet, adipiscing elit.</p> 
        <button class="btn btn-default btn-small">go</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

演示：http://codeply.com/go/7tHkfiSWT4

来源

2015-04-17 22:01:48 ZimSystem

如何垂直居中引导3行和列？

回答

相关问题