定义：规定元素中的文本的水平对齐方式
常用值：left (左对齐) | right (右对齐) | center (居中) | justify (两端对齐)
.box {
background-color: tomato;
/* 居中对齐 */
text-align: center;
}<div class="box">
<img src="./1.png" alt="">
</div>
由上述代码可以看出text-align不仅可以使文本居中，同样可以使图片居中
text-align (MDN文档)：设置块元素或者单元格框的行内内容的水平对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
background-color: tomato;
text-align: center;
}
.b1{
width: 200px;
background-color: #0f0;
}
</style>
</head>
<body>
<div class="box">
<div class="b1">aaa</div>
</div>
</body>
</html>运行结果如下图：由此可见，text-align并不可以让块级元素在其父元素内居中
由此得出结论：text-align描述了如果内容在没有完全填充的情况下，块的行内级元素（inline-level content）如何沿着行内轴对齐。
行内级元素：inline | inline-block
因此如果想让一个块级元素在其父元素内使用text-align对齐方式，则可以将此块级元素变为行内级元素即可。
<style>
.box{
background-color: tomato;
text-align: center;
}
.b1{
width: 200px;
background-color: #0f0;
display:inlin-block;
}
</style>
<div class="box">
<div class="b1">aaa</div>
</div>
运行结果如下：
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
