在網(wǎng)頁(yè)開(kāi)發(fā)中，經(jīng)常會(huì)使用無(wú)序列表（ul）來(lái)展示內(nèi)容。而多行無(wú)序列表中，使每個(gè)li垂直居中是一項(xiàng)重要的樣式設(shè)計(jì)。本文將介紹如何使用CSS來(lái)達(dá)到這一效果。 首先，我們先看一下默認(rèn)情況下，多行l(wèi)i垂直對(duì)齊的問(wèn)題。我們先創(chuàng)建一個(gè)有多行文本的無(wú)序列表：

這是第一行文本
這是第二行文本
這是第三行文本
這是第四行文本

效果如下：

• 這是第一行文本
• 這是第二行文本
• 這是第三行文本
• 這是第四行文本

可以看到，多行文本的li并沒(méi)有垂直居中對(duì)齊。這是由于默認(rèn)情況下，li元素采用基線對(duì)齊的方式，即li元素的底線與相鄰文本的底線對(duì)齊。 為了解決這個(gè)問(wèn)題，我們可以修改CSS樣式。我們可以使用display:table和display:table-cell來(lái)模擬表格，實(shí)現(xiàn)多行l(wèi)i元素的垂直居中對(duì)齊。

這是第一行文本
這是第二行文本
這是第三行文本
這是第四行文本

效果如下：

• 這是第一行文本
• 這是第二行文本
• 這是第三行文本
• 這是第四行文本

這種方法可以讓多行文本的li元素垂直對(duì)齊，而且適用于所有瀏覽器。如果有更好的方法，歡迎您分享。