在CSS中，我們經(jīng)常遇到圖片和文字需要垂直中部對齊的情況。這時候，我們可以使用一些技巧來實現(xiàn)這個需求。 一種簡單的方法是使用line-height屬性。我們可以將line-height設(shè)置為與元素的高度相等，這樣文字就會垂直居中。例如，下面的代碼可以實現(xiàn)一個圖片和文字垂直居中的效果：

<div class="container">
<img src="example.jpg" alt="Example">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
.container {
display: flex;
align-items: center;
flex-wrap: wrap;
height: 300px;
}
img {
height: 100px;
margin-right: 20px;
}
p {
line-height: 300px;
}

在這個例子中，我們將container元素設(shè)置為flex布局，并使用align-items來將元素垂直居中。我們還設(shè)置了flex-wrap為wrap，這樣如果文字過長，它會自動換行。容器的高度設(shè)置為300px，并給圖片設(shè)置了一個固定的高度。 注意，這種方法只適用于單行文本。如果你需要對齊多行文本，需要使用一些不同的技巧。 另一種方法是使用CSS的transform屬性。我們可以將圖片的位置相對于文字進行微調(diào)。例如，下面的代碼可以實現(xiàn)一個多行文本和圖片垂直居中的效果：

<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
<img src="example.jpg" alt="Example">
</div>
.container {
position: relative;
height: 300px;
}
p {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
img {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
height: 100px;
}

在這個例子中，我們首先將容器元素的position屬性設(shè)置為relative。然后，我們將p元素的position屬性設(shè)置為absolute，并使用top: 50%和transform: translateY(-50%)來將多行文本垂直居中。同樣，我們將圖片的position屬性設(shè)置為absolute，并使用top: 50%和transform: translateY(-50%)將其垂直居中。我們還將圖片的right屬性設(shè)置為0，這樣它就會像文本一樣從右邊對齊。 不管你使用哪種方法，都可以輕松地實現(xiàn)圖片和文本的垂直對齊。同時也可以嘗試一些其他方法，找到適合你的技巧。