如果你想讓文字在一個元素中居中顯示,那么可以使用CSS的text-align屬性。在需要居中的元素的樣式中,設置text-align為center,就可以讓文字在中間顯示。
.centered-text { text-align: center; }
上面的代碼將text-align屬性應用于.centered-text類,使這個元素中的所有文字都居中顯示。
如果你只想讓單行文本居中,可以使用CSS的line-height和height屬性。首先,將元素的line-height屬性設置為與height相同的值,然后讓text-align屬性為center。這樣,文本就會在垂直和水平方向上都居中顯示。
.single-line { height: 50px; line-height: 50px; text-align: center; }
上面的代碼將height和line-height屬性應用于single-line類,這個類只適用于單行文本。
如果你想讓多行文本居中,可以使用更復雜的技巧。在需要居中的元素的樣式中,設置display為table-cell和vertical-align為middle。然后在一個父元素中使用display:table來使這個元素顯示為一個表格單元格,以達到讓多行文本居中的效果。
.centered-multiline { display: table-cell; vertical-align: middle; } .parent { display: table; }
上面的代碼將display和vertical-align屬性應用于.centered-multiline類,同時父元素.parent的display屬性被設置為table,以使這個元素顯示為一個表格單元格。