"margin: 0 auto" 没有居中

Question

这快把我逼疯了...谁能告诉我为什么中心列不会在左右列之间居中？我正在尝试通过在中心列上使用 margin: 0 auto; 来做到这一点。

    $(document).ready(function(){
        $("#hide-show").click(function(){
            $("#panel").slideToggle();
        });
    });

        .main-wrapper{
            margin: 0 auto;
            width: 70%;
        }
        
        #panel{
            width: 100%;
            background-color: aqua;
            display: none;
            position: relative;
            float: left;
        }
        .wrapper{
            width: 100%;
        }
        .images{
            width: 100%;
        }
        #img-1{
            background: url("http://lorempixel.com/output/people-q-c-640-480-1.jpg") no-repeat center;
            background-size:contain;
            height: 300px;
            width: 100%;
        }
        .col {
            width: 32%;
            float: left;
            overflow: hidden;
            background: red;
            border: 2px solid black;
        }

        .col:last-child{
            float: right;
        }

        #testing{
            background: yellow;
            margin: 0 auto;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-wrapper">
    <button id="hide-show" name="Click me">Click me</button>
    <div id="panel">
        <div class="wrapper">
            <div class="col">
                <p>Hello world! 2</p>
                <div id="img-1" class="images"></div>
            </div>
            <div class="col" id="testing">
                <p>Hello world! 3</p>
            </div>
            <div class="col">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit
                    beatae rerum ratione, voluptates nisi voluptate fugiat consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque,
                    voluptate fugiat impedit beatae rerum ratione, voluptates nisi voluptate fugiat consectetur adipisicing elit. Suscipit veniam quisquam,
                    rem illum dicta cumque, voluptate fugiat impedit beatae rerum ratione. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit
                    beatae rerum ratione, voluptates nisi voluptate fugiat consectetur adi</p>
            </div>
        </div>
    </div>

    <p>Hello world! 4</p>
    </div>

这里我把一个JSFiddle放在一起：JSFiddle

谢谢！

Answer 1

margin: 0 auto; 在这里不起作用，因为你在这里有 float: left;。

将列宽增加到 33.33%。并添加 box-sizing: border-box;

.col {
  width: 33.33%;
  float: left;
  overflow: hidden;
  background: red;
  border: 2px solid black;
  box-sizing: border-box;
}

Answer 2

显然您不能在浮动元素上使用 margin: auto;。正如 JaromandaX 在评论中所述，针对此特殊情况的答案是为中间列添加 float: none; CSS 规则。感谢大家的帮助！

Answer 3

我把你的 float:left 改成了 display:inline-block;

    $(document).ready(function() {
      $("#hide-show").click(function() {
        $("#panel").slideToggle();
      });
    });

        .main-wrapper {
          margin: 0 auto;
          width: 70%;
        }
        #panel {
          width: 100%;
          background-color: aqua;
          display: none;
          position: relative;
          float: left;
        }
        .wrapper {
          width: 100%;
          height: 800px;
        }
        .images {
          width: 100%;
        }
        #img-1 {
          background: url("http://lorempixel.com/output/people-q-c-640-480-1.jpg") no-repeat center;
          background-size: contain;
          height: 300px;
          width: 100%;
        }
        .col {
          width: 32%;
          height: 100%;
          display: inline-block;
          overflow: hidden;
          background: red;
          border: 2px solid black;
        }
        .col:last-child {
          float: right;
        }
        #testing {
          background: yellow;
          margin-left: auto;
          margin-right: auto;
        }

<div class="main-wrapper">
  <button id="hide-show" name="Click me">Click me</button>
  <div id="panel">
    <div class="wrapper">
      <div class="col">
        <p>Hello world! 2</p>
        <div id="img-1" class="images"></div>
      </div>
      <div class="col" id="testing">
        <p>Hello world! 3</p>
      </div>
      <div class="col">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit beatae rerum ratione, voluptates nisi voluptate fugiat consectetur adipisicing elit. Suscipit veniam quisquam,
          rem illum dicta cumque, voluptate fugiat impedit beatae rerum ratione, voluptates nisi voluptate fugiat consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit beatae rerum ratione. Lorem ipsum
          dolor sit amet, consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit beatae rerum ratione, voluptates nisi voluptate fugiat consectetur adi</p>
      </div>
    </div>
  </div>

  <p>Hello world! 4</p>
</div>

Answer 4

浮动元素与其他元素表现不佳

因为它是 3 列输出，所以很容易修复

总的来说：

html:

<div class='leftColumn col'> ... </div>
<div class='rightColumn col'> ... </div>
<div class='centerColumn col'> ... </div>
<div class='clearFloats'></div>

css

.col { width:32%; }
.leftColumn { float:left; }
.rightColumn { float:right; }
.centerColumn { margin:0 auto; }
.clearFloats { clear:both; font-size:0; line-height: 0; height:0;}

你会注意到额外的 "clearFloats" div ...如果你不清除浮动，可能会发生奇怪的布局问题（虽然在这种情况下似乎不是） -

我发布了 https://jsfiddle.net/97nbtgtb/1/，它改变了你的 markup/css 有点像上面，没有添加任何清理 div，只是改变了 css中心柱没有浮动

"margin: 0 auto" 没有居中

"margin: 0 auto" is not centering

html

css

margin