html – CSS“margin：0 auto”不居中

概述好的,我知道这个话题已被涵盖.但是我已经研究过各种解决方案并且几乎没有成功. 我只是不知道为什么这个保证金：0自动;不管用.我尝试用宽度补偿填充：calc(33％ – 40px);但这不起作用. 任何帮助解决为什么会这样,解决方案将不胜感激！ .container { margin: 0 auto;}[class*='col-'] { float: left;}.col-2-3 好的,我知道这个话题已被涵盖.但是我已经研究过各种解决方案并且几乎没有成功.

我只是不知道为什么这个保证金：0自动;不管用.我尝试用宽度补偿填充：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;  @R_502_5559@: 5px #000 solID;  @R_502_5559@-left: 0px;  @R_502_5559@-right: 0px;  background-color: #A7F4F6;  Font-size: xx-large;  text-align: center;}

<div class='container'>  <div >    <div class='grID'>      <div >        <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/

解决方法 这是工作.

问题是你是一个div的中心,默认情况下它是一个块级元素,因此占据其父级(在本例中为body)的100％宽度.所以没有空间可以水平移动,因此没有空间来居中.

有关说明,请参阅此revised demo,其中包含.container附加的边框.

如果减小.container的宽度,您将看到居中的工作.这是第二个@L_419_2@,宽度：50％应用于.container.

总结

以上是内存溢出为你收集整理的html – CSS“margin：0 auto”不居中全部内容，希望文章能够帮你解决html – CSS“margin：0 auto”不居中所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。