如何在引导程序中的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+

回答

相关问题