如何使元素居中[重复]

Question

如何将水平对齐应用于<label> 元素？如果我这样做<label><p>3</p></label> 一切正常。我不明白为什么<p> 元素有自动边距（居中），而<label> 没有。

html

body {
  background: #2b2b2b;
  font-size: 36px;
  font-family: Helvetica neue, roboto;
  color: white;
}
.main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 75%;
  margin: 0 auto;
  background: black;
}
.common {
  width: 45%
}
#div1 {
  background: purple;
  text-align: right;
}
#div2 {
  background: orange;
}
#div3 {
  background: olive;
  text-align: right;
}
#div4 {
  background: gray;
}
label {
  
}

<div class="main">
  <div id="div1" class="common">1</div>
  <div id="div2" class="common">2</div>
  <div id="div3" class="common"><label for="name-label">3</label></div>
  <div id="div4" class="common"><p>4</p></div>
</div>

Answer 1

默认情况下，p 元素是 display: block，label 元素是 display: inline。

margin: auto 将使块元素居中。它不会使内联元素居中。

在内联元素（在本例中为<div>）的父级上使用text-align: center（而不是right）将内容居中。

---

您示例中的 p 元素未居中，而是左对齐。如果它有margin: auto，那么它将居中。

---

如果您在谈论 vertical 对齐（这不是您所说的），那么 p 元素位于垂直中心，但那是因为它具有相同的顶部和底部边距用户代理样式表和其内容高度与边距相结合，使其成为那里最高的东西。如果块 3 中的内容更高，则该段落将比其包含的 div 的底部更靠近顶部。