如何垂直居中引導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行和列？

回答

相關問題