CSS「margin：0 auto」not centering

好的，我明白這個話題已經被覆蓋了。但我已經看過各種解決方案，並且與他們沒有多大的成功。CSS「margin：0 auto」not centering

我只是不知道爲什麼這個margin: 0 auto;不起作用。我試圖用width: calc(33% - 40px);補償填充，但這不起作用。

任何幫助爲什麼發生這種情況，解決方案將不勝感激！

.container { 
 
    margin: 0 auto; 
 
} 
 

 
[class*='col-'] { 
 
    float: left; 
 
} 
 

 
.col-2-3 { 
 
    width: 66.66%; 
 
} 
 

 
.col-1-3 { 
 
    width: 33.33%; 
 
} 
 

 
.grid:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
.col-word { 
 
    width: auto; 
 
    height: auto; 
 
    padding: 25px; 
 
    border: 5px #000 solid; 
 
    border-left: 0px; 
 
    border-right: 0px; 
 
    background-color: #A7F4F6; 
 
    font-size: xx-large; 
 
    text-align: center; 
 
}

<div class='container'> 
 
    <div class="grid"> 
 
    <div class='grid'> 
 
     <div class="col-1-3"> 
 
     <p class='col-word'>T</p> 
 
     <p class='col-word'>V</p> 
 
     </div> 
 
    </div> 
 

 
    <div class='grid'> 
 
     <div class='col-1-3'> 
 
     <div class='letter'>W</div> 
 
     </div> 
 
     <div class='col-1-3'> 
 
     <div class='letter'>P</div> 
 
     </div> 
 
     <div class='col-1-3'> 
 
     <div class='letter'>V</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

https://jsfiddle.net/xm2gvzbf/5/

來源

2016-03-05 JP Foster

它正在工作。

問題是你爲中心的div，它是由一個缺省塊級元素，並因此佔據其母體的100％的寬度（body，在這種情況下）。所以沒有空間可以水平移動，因此沒有空間可以居中。

有關示例，請參閱此revised demo，它有一個圍繞.container的添加邊框。

如果你減小寬度.container你會看到對中的工作。這是第二個revised demowidth: 50%適用於.container。

來源

2016-03-05 17:12:54

謝謝你的幫助！但是這裏有一個問題。我確實希望它達到90％左右。由於頁面上顯示的數據會有很大差異。有時數據佔用頁面的90％，而其他數據佔用頁面寬度的20％。有沒有解決方案？無論哪種方式，我希望它看起來居中。我擔心強制像500px這樣的固定寬度。它不會對各種數據作出響應。 –

您可以使'.container'爲flexbox，然後將內容居中。那麼你不需要擔心'.container'的寬度。 http://stackoverflow.com/a/33049198/3597276 –

柔性盒子很棒。謝謝！ –

您應該設置一個寬度上.container讓margin: 0 auto;工作。請參閱updated JSfiddle。

來源

2016-03-05 17:12:16 Roy

它實際上有效，但沒有指定寬度需要100％。嘗試是這樣的：

.container { 
    margin: 0 auto; 
    width:50%; 
    }

希望這可以幫助

來源

2016-03-05 17:15:06

，則應指定div的寬度保證金：自動工作。嘗試使用百分比寬度來讓你的div響應。

來源

2016-03-05 20:31:32

CSS「margin：0 auto」not centering

回答

相關問題