CSS "margin: 0 auto" 没有居中

Question

好的，我知道这个主题已经涵盖了。但是我研究了各种解决方案，但收效甚微。

我只是不知道为什么这个 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/

Answer 1

您应该在 .container 上设置宽度以使 margin: 0 auto; 起作用。见 updated JSfiddle.

Answer 2

正在运行。

问题是您将 div 居中，默认情况下它是块级元素，因此占据其父元素的 100% 宽度（body，在本例中） .所以没有 space 水平移动，因此没有 space 居中。

有关插图，请参阅此修改后的演示，其中在 .container 周围添加了边框。

.container {
  margin: 0 auto;
  border: 1px solid red;
}

[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>

如果减小 .container 的宽度，您将看到居中效果。这是第二个演示，width: 50% 应用于 .container.

.container {
  margin: 0 auto;
  border: 1px solid red;
  width: 50%;
}

[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>

Answer 3

它确实有效，但没有指定宽度它会占满 100%。尝试类似的东西：

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

希望这对您有所帮助

Answer 4

您应该为 margin:auto 指定 div 的宽度。尝试使用百分比宽度来使您的 div 也具有响应性。

Answer 5

另一个对我有用的修复是更改父级的显示：在 CSS 中内联并设置最大宽度，以便边距自动使文本居中。到目前为止，这已经解决了问题。不确定它是否是最佳解决方案，但它目前正在运行。请看下面的代码：

.parent-container{
    display: inline;
    max-width: 500px;
    padding: 20px; 
    margin: 0 auto; 
}

CSS "margin: 0 auto" 没有居中

CSS "margin: 0 auto" not centering

html

css

centering