如何在引導程序中的col元素中對圖像進行居中3+

自從轉到引導程序3以來，我一直在努力將幾張圖像居中。以前，我會在整個col元素上使用基於分頁的類，但那樣做現在不工作。如何在引導程序中的col元素中對圖像進行居中3+

此外，我已經嘗試創建類img中心使用保證金：0汽車（per the answer here），但那不工作，我不確定爲什麼。如果有人能指引我朝正確的方向發展，那會很棒。

<div class="container"> 
    <div class="row"> 
     <div class="col-md-10 col-md-offset-1"> 
      <div class="row"> 
       <div class="col-md-4"> 
        <img class="img-center" src="images/chart_bw.png"> 
        <h3 class="text-center">Charts & data</h3> 
        <p class="text-center">Polish your analytical skills by picking apart Marimekko, bar charts, regressions & more</p> 
       </div><!-- col-md-4 --> 

       <div class="col-md-4 pagination-centered"> 
        <img class="img-center" src="images/calculate_bw.png"> 
        <h3 class="text-center">Mental math</h3> 
        <p class="text-center">Nail your mental math by practicing on unlimited case style math problems</p> 
       </div><!-- col-md-4 --> 

       <div class="col-md-4 pagination-centered"> 
        <img class="img-center" src="images/lightbulb_bw.png"> 
        <h3 class="text-center">Case problems</h3> 
        <p class="text-center">Structure problems and compare answers to suggestions from McKinsey consultants.</p> 
       </div><!-- col-md-4 --> 
      </div><!-- /.row --> 
     </div> <!-- col-md-10 --> 
    </div><!-- /.row --> 
</div><!-- container -->

.img-center{ 
    margin: 0 auto; 
}

來源

2014-02-16 john k

你已經錯過了'顯示：塊;'聲明。 –

添加「中心塊」的圖像是行不通的？ –

<img>不是塊級元素。您需要將display: block;設置爲<img>以獲得auto左/右邊距。

.img-center { 
    display: block; 
    margin: 0 auto; 
}

或者使用.text-center類爲父元件（在這種情況下，列）對齊內聯（ - 嵌段），例如<img>中心水平的元件。

還有一個助手類叫.center-block。你可以用它來對準<img>元素：

<img class="center-block" src="images/lightbulb_bw.png">

來源

2014-02-16 23:32:14

實際上引導上課準備定心一些元素。只需添加類「中心塊」的圖像類。

<img class="img-center center-block" src="images/chart_bw.png">

這裏小提琴http://jsfiddle.net/nucleo1985/RVD48/1/

來源

2014-02-16 23:40:07

如何在引導程序中的col元素中對圖像進行居中3+

回答

相關問題