html - 容器内的CSS中心div？

Question

此 HTML 代码有效:

<div class="MyContainer" align="center">
    <div>THIS DIV IS CENTERED</div>
</div>

但我想在容器的 css 上做，比如:

.MyContainer{
    align: center;
}

所以我所有的容器都会让 div 居中。

Answer 1

文本对齐 的 CSS 属性称为 text-align不像内联 DOM 属性那样对齐。

---

如果你想居中一个 block 元素(如div、p、ul等。 .) 本身，您需要设置其宽度并将水平边距设置为 auto。

例如，以下代码将使具有 MyContainer 类的元素内的每个 div 成为其父元素大小的 80%，并将其居中放置在其容器的中间。

.MyContainer div {
    margin: 0 auto;
    width: 80%;
}

代码片段

div {
    border: 2px solid black;
    margin: 10px;
}

.MyContainer div {
    margin: 10px auto;
    width: 80%;
}

.centered {
  text-align: center;
}

<div class="MyContainer">
    <div>Inner DIVs are centered
        <div class="centered">Here the text is also centered</div>
    </div>
</div>