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

它正在发挥作用。

问题在于您将div居中，默认情况下这是一个块级元素，因此占据其父级（body的100％宽度，在这种情况下）。所以没有空间可以水平移动，因此没有空间可以居中。

如需说明，请参阅此revised demo，其.container附近有一个新的边框。

如果缩小.container的宽度，您将看到定心工作。这是第二个revised demo width: 50%已应用于.container。

Answer 2

它实际上有效，但没有指定宽度，它需要100％。尝试类似：

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

希望这可能会有所帮助

Answer 3

您应该为margin指定div的宽度：auto to work。尝试使用百分比宽度来使你的div响应。

Answer 4

您应该在.container上设置宽度以使margin: 0 auto;有效。请参阅updated JSfiddle。

Answer 5

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

mysqlx://

CSS“margin：0 auto”不居中

5 个答案: