一、text-align在不同元素上的应用
text-align可以用在多种元素上，包括段落、表格、块级元素等。
/* 文本水平居中 */
p {
text-align: center;
}
/* 表格中单元格文本居中 */
table {
border-collapse: collapse;
}
td {
text-align: center;
}
使用text-align可以让文本在水平方向上居中，而在表格中可以使单元格内文本居中。在大部分块级元素（如div）中，text-align默认值为左对齐，可以通过设置为center、right等值来改变对齐方式。
二、text-align与多行文本的对齐
在处理多行文本时，text-align能够控制文本在垂直方向上的对齐方式，有四种不同的取值:
- top
- middle / center
- bottom
- baseline
其中top将文本放置在元素的顶部，bottom将文本放置在元素的底部，而middle/center则将文本在垂直方向上居中对齐，baseline将文本与其父元素的基线对齐。
/* 多行文本垂直居中对齐 */
p {
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
在多行文本中，我们可以使用display:flex;和justify-content:center;以及align-items:center;来使文本在垂直方向上居中对齐。
三、text-align对图片的对齐方式
除了文本之外，我们还可以使用text-align指定图片在元素内的对齐方式。
/* 图片水平居中对齐 */
img {
display: block;
margin: auto;
}
/* 图片上下垂直居中对齐 */
.container {
position: relative;
}
img {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
我们可以使用display:block;和margin:auto;来让图片在水平方向上居中对齐。对于垂直方向的对齐，我们可以在图片的父容器上设置position:relative;，然后将图片设置为position:absolute;，并将top属性设置为50%，再使用transform:translateY(-50%);来使图片垂直居中对齐。
四、text-align对齐方式的覆盖
有时候我们需要覆盖text-align指定的对齐方式，可以将该元素的对齐方式设置为center或left等，或者使用!important来覆盖。
/* 覆盖text-align对齐方式 */
p {
text-align: center !important;
text-align: left;
}
在这个例子中，我们可以使用!important来强制覆盖text-align指定的center对齐方式，将对齐方式设置为left。
五、结语
text-align虽然看似简单，但是在实际开发中却有着丰富的应用场景。在处理文本、图片、表格等多种元素时，text-align都能够起到不同的作用，使我们的排版更加美观。
