“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

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

因为它是一个 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/，它改变了你的标记/css，有点像上面，没有添加任何清除 div，只是改变了 css 以有效地使中心 col 没有浮动

Answer 2

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

显然你不能在浮动元素上使用margin: auto;。这种特殊情况的答案是为中间列添加float: none; CSS 规则，如 cmets 中 JaromandaX 所述。谢谢大家的帮助！