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方式align与内联 DOM 属性不同。

---

如果要将块元素（如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>