CSS3中的li
文字垂直居中可以使用如下的方式實現(xiàn):
li {
display: flex; /* 設(shè)置彈性布局 */
align-items: center; /* 元素垂直居中 */
}
以上代碼中,display: flex;
設(shè)置元素為彈性布局,align-items: center;
將元素垂直居中對齊。
如果需要對多行文本進行垂直居中,則需要將align-items
設(shè)置為stretch
,并在li
中添加一個height
屬性的值。
li {
display: flex; /* 設(shè)置彈性布局 */
align-items: stretch; /* 多行文本元素垂直居中 */
height: 60px; /* 設(shè)置元素高度 */
}
通過以上的簡單代碼,可以輕松實現(xiàn)li
文字的垂直居中效果,方便我們進行網(wǎng)頁設(shè)計。