在網頁開發中,經常需要將文字居中對齊。而對于長短不一的兩行文字,我們可以使用CSS來垂直居中它們。
首先,我們需要給包含這兩行文字的容器設置一個固定的高度。然后使用display:flex和align-items:center屬性來實現垂直居中效果。具體代碼如下:
.container{ height: 100px; display: flex; align-items: center; }在HTML頁面中,我們將這兩行文字放在一個
標簽中,然后將這個
標簽放在容器中。代碼如下:
這樣,兩行文字就可以垂直居中了。如果需要文字水平居中對齊,可以使用text-align:center屬性,如下所示:這是第一行文字
這是第二行文字
.container{ height: 100px; display: flex; align-items: center; text-align: center; }總結:使用CSS的display:flex和align-items:center屬性可以輕松實現兩行文字的垂直居中。同時,使用text-align:center屬性可以實現文字的水平居中效果。
上一篇個人簡歷代碼案例css
下一篇中文文字自動換行css