在 div 中居中一个 inline-block 元素[重复]

Question

我有一个必须在 div 中居中的 inline-block 元素。

<div class="parent">
  <div class="other">
    some stuff that should not be centered
  </div>
  <div class="other2">
    some stuff that should not be centered
  </div>
  <div class="element">
    some element that needs to be centered
  </div>
</div>

我只能访问 CSS 而不能访问 HTML。我不能在父 div 上使用“text-align：center”，因为父 div 中有很多容器。该元素必须保持为 inline-block 元素。

我只想将“元素”居中。我该怎么做？

Answer 1

text-align: center 确实是要走的路；这只是找到一个只针对您所追求的元素的选择器的问题。根据你上面的例子，你应该需要的是.element：

.element {
  text-align: center;
}

<div class="parent">
  <div class="other">
    some stuff that should not be centered
  </div>
  <div class="other2">
    some stuff that should not be centered
  </div>
  <div class="element">
    some stuff that needs to be centered
  </div>
</div>

假设element 类有多个元素，您可以使用child combinator selector (>) 作为.parent > .element 来专门定位.parent 的直接子元素：

.parent > .element {
  text-align: center;
}

<div class="parent">
  <div class="other">
    some stuff that should not be centered
  </div>
  <div class="other2">
    some stuff that should not be centered
  </div>
  <div class="element">
    some stuff that needs to be centered
  </div>
</div>

您还可以将:nth-of-type 之类的伪选择器与.parent > div:nth-of-type(3) 结合使用，这将针对.parent 的第三个<div> 子级，从而获得相同的结果：

.parent > div:nth-of-type(3) {
  text-align: center;
}

<div class="parent">
  <div class="other">
    some stuff that should not be centered
  </div>
  <div class="other2">
    some stuff that should not be centered
  </div>
  <div class="element">
    some stuff that needs to be centered
  </div>
</div>

如果您希望将整个元素而不只是文本居中，则您正在寻找margin: 0 auto，但请注意<div> 元素默认占据该行的完整width，因此您' 也会想在元素上设置一个width。理想情况下这将是width: fit-content，以确保元素只占用与文本一样多的空间：

.parent > .element {
  margin: 0 auto;
  width: fit-content;
}

<div class="parent">
  <div class="other">
    some stuff that should not be centered
  </div>
  <div class="other2">
    some stuff that should not be centered
  </div>
  <div class="element">
    some stuff that needs to be centered
  </div>
</div>

请注意，margin 仅适用于块级元素（默认情况下是 <div>），因此如果您使用 display: inline-block 手动更改它（或者您正在使用 <span>），您将需要额外设置display: block。