在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。