“margin：0 auto”没有居中

Posted 2023-03-06

【中文标题】“margin：0 auto”没有居中

【英文标题】："margin: 0 auto" is not centering

【发布时间】：2015-10-24 10:58:49

【问题描述】：

这快把我逼疯了...有人可以告诉我为什么中心栏根本不会在左右栏之间居中吗？我正在尝试通过在中心列上使用 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

谢谢！

【问题讨论】：

签出this。

感谢@Pushkin 的回复，帖子上说我应该为要居中的元素定义一个宽度。如果你看到我的.col CSS 规则，所有的列都有 32% 的宽度，我试图让一列居中。所以我想那篇文章的情况与我的不同。

简短回答 - floats 是问题所在 - 请参阅 jsfiddle.net/97nbtgtb/1 了解一种可能的解决方法

哦，这解决了一切 xD 所以我不能居中浮动元素？感谢@JaromandaX 的帮助

如果它们的宽度都一样，为什么不把它们都浮动到左边呢？

【参考方案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 没有浮动

【讨论】：

很高兴知道，我应该添加清晰的浮动 div，因为它位于我要创建的网站的中间。为什么中间一列必须是最后一列？

【参考方案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;

【讨论】：

这只会去掉边距，就像你说的那样它不起作用，因为我有float: left; 所以@JaromandaX 建议我应该只对我正在尝试的元素执行float: none;中心，这样我就可以保持边距。感谢@afelixj 的回复

【参考方案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>

【讨论】：

感谢@RachelGallen，它可以解决边距问题，但由于某种原因它弄乱了列的高度。显然我可以简单地从中间列中删除浮动属性，它就起作用了。感谢您的帮助！

@AlexandreKrabbe 我将列的高度更改为 100%，您可以将其更改回来

所以有两个答案，我怎样才能验证它们？

【参考方案4】：

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

【讨论】：

不仅如此，您还必须将中心列 LAST 放入包装器中

您介意发布答案以便我接受吗？我刚刚注意到，为什么它必须是最后一个？