为什么保证金属性不起作用？答案

【问题标题】：why margin property is not working?为什么保证金属性不起作用？
【发布时间】：2018-07-10 05:10:51
【问题描述】：

我想将类按钮的内容水平和垂直对齐到中间。我为此使用了 margin: auto 属性，但它垂直对齐文本而不是水平对齐。我知道可以通过使用text-align 属性或display:flex 使其有效。但我只需要在这里说明为什么margin: auto 属性不起作用。我在下面添加sn-p。谢谢进步。

注意这里它垂直工作正常，问题不能水平工作。那么它如何与不能垂直工作重复？

#main-body{
    width: 100%;
    height: 95%;
    box-sizing: border-box;
    background: yellow;
}

#title-container{
    width:100%;
    height: 10%;
    background: red;
}

#button-container{
    width:100%;
    height: 10%;
    background-color: blue;
}

#data-container{
    padding: 5px;
    box-sizing: border-box;
    background-color: blueviolet;
}

.btn{
    width:25%;
    height: 100%;
    border: 1px solid black;
    /*margin:auto;*/
    float:left;
    box-sizing: border-box;
    /*margin:0px;*/
}
.btn-text{
    margin:auto;
    /*float:none;*/
    color: #ffffff;
}

<body>
  <div id="main-body">
    <div id="title-container"></div>
    <div id="button-container">
      <div id="home-button" class="btn">
        <p class="btn-txt">Home</p>
      </div>
      <div id="update-button" class="btn">
        <p class="btn-txt">Update</p>
      </div>
      <div id="delete-button" class="btn">
        <p class="btn-txt">Create New</p>
      </div>
      <div id="logout-button" class="btn">
        <p class="btn-txt">Log Out</p>
      </div>
    </div>
    <div id="data-container"></div>
  </div>
</body>

我知道可以使用 text-align:center;

    #main-body{
        width: 100%;
        height: 95%;
        box-sizing: border-box;
        background: yellow;
    }

    #title-container{
        width:100%;
        height: 10%;
        background: red;
    }

    #button-container{
        width:100%;
        height: 10%;
        background-color: blue;
        text-align:center;
        
    }

    #data-container{
        padding: 5px;
        box-sizing: border-box;
        background-color: blueviolet;
        
    }

    .btn{
        width:25%;
        height: 100%;
        border: 1px solid black;
        /*margin:auto;*/
        float:left;
        box-sizing: border-box;
        /*margin:0px;*/
    }
    .btn-text{
        margin:auto;
        /*float:none;*/
        color: #ffffff;
    }

<body>
  <div id="main-body">
    <div id="title-container"></div>
    <div id="button-container">
      <div id="home-button" class="btn">
        <p class="btn-txt">Home</p>
      </div>
      <div id="update-button" class="btn">
        <p class="btn-txt">Update</p>
      </div>
      <div id="delete-button" class="btn">
        <p class="btn-txt">Create New</p>
      </div>
      <div id="logout-button" class="btn">
        <p class="btn-txt">Log Out</p>
      </div>
    </div>
    <div id="data-container"></div>
  </div>
</body>

它也适用于 display:flex;

#main-body{
    width: 100%;
    height: 95%;
    box-sizing: border-box;
    background: yellow;
}

#title-container{
    width:100%;
    height: 10%;
    background: red;
}

#button-container{
    width:100%;
    height: 10%;
    background-color: blue;
    display:flex;
    align-content:center;
    justify-content:center;
}

#data-container{
    padding: 5px;
    box-sizing: border-box;
    background-color: blueviolet;
}

.btn{
    width:25%;
    height: 100%;
    border: 1px solid black;
    /*margin:auto;*/
    float:left;
    box-sizing: border-box;
    /*margin:0px;*/
    display:flex;
    align-content:center;
    justify-content:center;
}
.btn-text{
    margin:auto;
    /*float:none;*/
    color: #ffffff;
}

<body>
  <div id="main-body">
    <div id="title-container"></div>
    <div id="button-container">
      <div id="home-button" class="btn">
        <p class="btn-txt">Home</p>
      </div>
      <div id="update-button" class="btn">
        <p class="btn-txt">Update</p>
      </div>
      <div id="delete-button" class="btn">
        <p class="btn-txt">Create New</p>
      </div>
      <div id="logout-button" class="btn">
        <p class="btn-txt">Log Out</p>
      </div>
    </div>
    <div id="data-container"></div>
  </div>
</body>

【问题讨论】：

@caramba 这里的问题正好相反。在这段代码上它垂直工作正常
CSS "margin: 0 auto" not centering的可能重复
@ismail 但这里只是 margin:auto;不是边距：0 自动；
margin:auto 或margin: 0 auto; 之间没有区别尝试在<p> 标签上添加宽度并检查margin:0 auto; 删除顶部底部边距也没有别的
What, exactly, is needed for “margin: 0 auto;” to work?

标签： html css margin

【解决方案1】：

据我所知，边距影响的是元素而不是内容。如果设置边距：0 自动；它将元素放置到父元素的中心。

【讨论】：

【解决方案2】：

这里有几件事你应该注意。

内容不能使用 margin: auto 垂直对齐；
要对齐内容垂直对齐，您需要使用其他一些方式，例如垂直对齐或使用 flexbox 模型等。
如果您想使用margin: auto 将内容水平居中对齐？那么元素的宽度不应大于内容宽度。
如果元素内的内容需要水平居中对齐，则只需使用 text-align: center;

有关 CSS 边距如何工作的更多参考，请阅读以下说明。

margin CSS 属性设置边缘区域的所有四个边元素。这是一次设置所有单独边距的简写： margin-top、margin-right、margin-bottom 和 margin-left。

只是为了解决您现有代码的问题，请查看以下解决方案。

CSS

类名从 .btn-text 更改为 .btn-txt

.btn-txt{
  text-align:center;
}

【讨论】：

【解决方案3】：

签出这个答案https://stackoverflow.com/a/35817140/2724173你的孩子必须有足够的宽度才能工作margin:auto

尝试为.btn-txt 指定宽度，即40px 也有你班级的拼写错误是btn-txt 而你的css 选择器是.btn-text

#main-body{
    width: 100%;
    height: 95%;
    box-sizing: border-box;
    background: yellow;
}

#title-container{
    width:100%;
    height: 10%;
    background: red;
}

#button-container{
    width:100%;
    height: 10%;
    background-color: blue;
}

#data-container{
    padding: 5px;
    box-sizing: border-box;
    background-color: blueviolet;
}

.btn{
    width:25%;
    height: 100%;
    border: 1px solid black;
    /*margin:auto;*/
    float:left;
    box-sizing: border-box;
    /*margin:0px;*/
}
.btn-txt{
    margin:10px auto;
    /*float:none;*/
    color: #ffffff;
    width:40px;
}

<body>
  <div id="main-body">
    <div id="title-container"></div>
    <div id="button-container">
      <div id="home-button" class="btn">
        <p class="btn-txt">Home</p>
      </div>
      <div id="update-button" class="btn">
        <p class="btn-txt">Update</p>
      </div>
      <div id="delete-button" class="btn">
        <p class="btn-txt">Create New</p>
      </div>
      <div id="logout-button" class="btn">
        <p class="btn-txt">Log Out</p>
      </div>
    </div>
    <div id="data-container"></div>
  </div>
</body>

【讨论】：