定义:规定元素中的文本的水平对齐方式
常用值: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>
运行结果如下: