文本对齐 CSS

在开发网页时，我们经常需要对文本进行排版和对齐。CSS提供了多种对齐和排版文本的属性，本文将介绍如何使用CSS实现不同文本对齐效果。

水平对齐

text-align

text-align属性可以用于设置文本的水平对齐方式。其可选值包括left（向左对齐）、right（向右对齐）、center（居中对齐），以及justify（两端对齐）。

.center{
    text-align: center;
}
.left{
    text-align: left;
}
.right{
    text-align: right;
}
.justify{
    text-align: justify;
}

justify-content

justify-content属性可以用于设置行内元素的水平对齐方式，其可选值包括flex-start（向左对齐）、flex-end（向右对齐）、center（居中对齐），以及space-between（两端对齐，元素之间间距相等）和space-around（两端对齐，元素之间间距和元素与边框的距离相等）。

.parent{
    display: flex;
    justify-content: center;
}

垂直对齐

vertical-align

vertical-align属性可以用于设置行内元素的垂直对齐方式。其可选值包括top（顶部对齐）、middle（居中对齐）、bottom（底部对齐），以及baseline（基线对齐）和sub（与基线对齐，并垂直调整到下标位置）以及super（与基线对齐，并垂直调整到上标位置）。

.align-top{
    vertical-align: top;
}
.align-middle{
    vertical-align: middle;
}
.align-bottom{
    vertical-align: bottom;
}
.align-baseline{
    vertical-align: baseline;
}
.align-sub{
    vertical-align: sub;
}
.align-super{
    vertical-align: super;
}

line-height

line-height属性可以用于设置行内元素的行距。设置与元素高度相等的行距可以使文本在容器中垂直居中对齐。

.container{
    height: 100px;
    line-height: 100px;
}

display:table

使用display:table和display:table-cell可以实现文本和块级元素的垂直对齐。将父元素设置为display:table，子元素设置为display:table-cell，并设置vertical-align可以实现子元素在父元素中的垂直对齐。

.parent{
    display: table;
}
.child{
    display: table-cell;
    vertical-align: middle;
}

结语

以上就是CSS中常用的文本对齐方式，通过这些属性，可以轻松实现文本的水平和垂直对齐效果。