在前端開(kāi)發(fā)中，經(jīng)常需要將圖片和文字進(jìn)行配合展示，常見(jiàn)的一種需求便是將圖片和文字垂直居中對(duì)齊。這在CSS中可以通過(guò)一些簡(jiǎn)單的技巧輕松實(shí)現(xiàn)。

首先，我們需要使用CSS的display屬性來(lái)設(shè)置容器元素的展示方式。常見(jiàn)的展示方式有block、inline-block和flex等。這里我們以flex為例：

.container {
display: flex;
align-items: center; /* 垂直居中 */
}

接著，我們需要再利用CSS中的一些屬性來(lái)對(duì)內(nèi)容進(jìn)行定位。但在這之前，我們需要先明確兩個(gè)概念：

• 外部容器（.container）：包裹圖片和文字的容器元素；
• 內(nèi)部容器（.content）：包裹文字的容器元素。

對(duì)于圖片，可以使用vertical-align: middle;屬性來(lái)對(duì)其進(jìn)行垂直居中。而對(duì)于文字，可以利用絕對(duì)定位和負(fù)邊距來(lái)進(jìn)行定位：

.container {
display: flex;
align-items: center; /* 垂直居中 */
position: relative; /* 相對(duì)定位 */
}
img {
vertical-align: middle; /* 垂直居中 */
}
.content {
position: absolute;
left: 50%; /* 居中 */
transform: translateX(-50%); /* 居中 */
margin-right: 20px; /* 調(diào)整文字和圖片之間的距離 */
}

上面的代碼中，我們將內(nèi)部容器進(jìn)行了絕對(duì)定位，并使用left: 50%;和transform: translateX(-50%);讓其居中，再通過(guò)margin-right屬性來(lái)調(diào)整文字和圖片之間的距離，從而實(shí)現(xiàn)了圖片和文字的垂直居中對(duì)齊。

在實(shí)際開(kāi)發(fā)中，還可以根據(jù)具體情況進(jìn)行一些微調(diào)，從而達(dá)到更好的效果。