CSS中的text-align:center

介绍

text-align:center是一种CSS属性，用于设置文本内容的水平对齐方式为居中。它可以应用于父div或子div，使得其中的内容在水平方向上居中对齐。

语法

text-align:center;

应用于父div

当text-align:center应用于父div时，它将作用于div中的所有子元素，使得这些子元素在水平方向上居中对齐。例如：

.parent {
    text-align: center;
}

<div class="parent">
    <h1>Hello World!</h1>
    <p>This is a paragraph.</p>
    <img src="example.png" alt="example image">
</div>

在上述代码中，文本和图像都将在父div中居中对齐。

应用于子div

当text-align:center应用于子div时，它将作用于子div中的文本内容，使得子div中的文本在水平方向上居中对齐。例如：

.child {
    text-align: center;
}

<div class="parent">
    <div class="child">
        <h1>Hello World!</h1>
        <p>This is a paragraph.</p>
    </div>
</div>

在上述代码中，子div中的文本将在其父div中居中对齐。

总结

text-align:center是一种非常有用的CSS属性，可以让内容在水平方向上居中对齐。它可以应用于父div或子div，具体使用取决于你想要实现的布局效果。