为什么保证金属性不起作用?

我想将类按钮的内容在水平和垂直方向上对齐到中间。我为此使用了margin: auto属性，但它垂直对齐文本而不是水平对齐。我知道可以通过使用text-align属性或display:flex使其有效，但我只需要一个关于为什么margin: auto属性不起作用的原因。我正在下面添加代码段。提前谢谢。

请注意，这里它在垂直方向上工作正常，问题在水平方向上不起作用，那么它如何复制不垂直工作？

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

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

查看此答案 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>

这里有几点你应该注意。

内容不能使用边距垂直对齐：自动;
要垂直对齐内容，您需要使用其他一些方式，例如垂直对齐或使用弹性框模型等。
如果要使用 Margin： auto？将内容水平居中对齐，则元素的宽度不应大于内容宽度。
如果元素内的内容需要水平居中对齐，则只需使用文本对齐：居中;

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

边距 CSS 属性设置边距区域的所有四个边元素。这是一个速记，可以一次设置所有单独的边距：上边距、右边距、下边距和左边距。

有关更详细的描述：https://developer.mozilla.org/en-US/docs/Web/CSS/margin

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

.CSS

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

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

相关内容

最新更新

热门标签：