在div中的中心元素解释

Question

我已经看到很多关于这个的帖子，我知道它很简单，但我无法让我的例子工作，我想了解为什么，因为我仍然没有把握定位在CSS中的概念。

我在我的应用程序中使用简单的引导程序。我有一个container与row和col-md-6。我的代码看起来像这样。

<section id="automat" class="box bg-light-grey"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-md-6 col-md-offset-3"> 
      <img src="images/iPod.png" class="scaleImage"/> 
     </div> 
     </div> 
    </div> 
</section> 

而且我的形象自定义的CSS样式看起来像这样（取决于屏幕尺寸，我会控制img元素的大小）。

.scaleImage { 
    width:300px; 
    height:auto; 
    position:relative; 
    margin:0 auto; 
} 

正如你所看到的，我已经尝试设置我的元素的确切width，与position:relative和margin:0 auto。根据其他帖子，这应该足以将我的元素居中在我的容器中，但事实并非如此。它仍然锁在我的col-md-6容器的左侧。

我的问题是：为什么我的解决方案无法正常工作，如何更改我的代码以使其工作？

Answer 1

这工作？

<div class="container"> 
    <div class="row"> 
     <div class="col-md-3"></div> 
     <div class="col-md-6 text-center"> 
     <img src="images/iPod.png" class="scaleImage" style="width:100%;height:100%"/> 
     </div> 
     <div class="col-md-3"></div> 
    </div> 
</div> 

Answer 2

尝试添加一个类，文本中心到col-md-6。它将中心对齐内容。

position:relative; 
float:none; 
width:100%; 
max-width:300px; 
margin:auto; 
DISPLAY:BLOCK 

所以到中心的元素在中间，你需要的CSS属性的组合

Answer 3

你可以尝试这样的，

section{ 
 
    background: gray; 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<section id="automat" class="box bg-light-grey"> 
 
    <div class="container text-center"> 
 
    <div class="row"> 
 
     <div class="col-md-6 col-md-offset-3"> 
 
     <img src="https://www.sfu.ca/content/sfu/publicsquare/_jcr_content/below-nav/parsys/image.img.jpg/1406566003083.jpg" class="scaleImage" /> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

Answer 4

您可以使用引导类'text-center'为中心。所以，你不需要使用margin：0 auto。

这里您也定义了一个偏移量。你不需要偏移来居中div。

.scaleImage { 
 
    width:300px; 
 
    height:auto; 
 
    position:relative; 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="automat" class="box bg-light-grey"> 
 
     <div class="container"> 
 
      <div class="row"> 
 
       <div class="col-md-6 col-md-offset-3 text-center"> 
 
        <img src="https://d3nevzfk7ii3be.cloudfront.net/igi/tcbxa1Eb6YMETIW2.large" class="scaleImage"/> 
 
       </div> 
 
      </div> 
 
     </div> 
 
</section>

Answer 5

margin: 0 auto是行不通的，因为图像是inline-block的元素（看：Why doesn't margin:auto center an image?） 要对齐图像父格或<div class="container text-center">做text-align: center。