CSS樣式如何讓字體居中?這是一個(gè)常見(jiàn)的問(wèn)題,下面我們來(lái)介紹幾種實(shí)現(xiàn)方式。
1. 使用text-align屬性讓文本居中。
p {
text-align: center;
}
2. 使用line-height將文本行高設(shè)置為與元素高度相等。
p {
height: 50px; /* 元素高度 */
line-height: 50px; /* 行高等于元素高度 */
text-align: center;
}
3. 使用flex布局讓文本在父元素中居中。
.container {
display: flex;
justify-content: center; /* 主軸居中 */
align-items: center; /* 交叉軸居中 */
}
需要注意的是,以上幾種方式都是適用于單行文本的情況。若要讓多行文本在父元素中垂直居中,可以使用display:table-cell屬性。
.container {
display: table-cell;
vertical-align: middle; /* 垂直居中 */
}