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将使块元素居中。它不会使内联元素居中。

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

示例中的p元素未居中，但保持左对齐。如果它有margin: auto，则它将居中。

如果您谈论的是垂直对齐方式（不是您所说的），那么p元素位于垂直中心，但这是因为它的顶部和底部相等用户代理样式表中的页边空白和其内容高度以及页边空白使它成为最高的内容。如果第3块中的内容更高，则该段落比其包含div的底部更靠近顶部。

如何将元素居中

1 个答案: