在CSS中，我们经常遇到图片和文字需要垂直中部对齐的情况。这时候，我们可以使用一些技巧来实现这个需求。 一种简单的方法是使用line-height属性。我们可以将line-height设置为与元素的高度相等，这样文字就会垂直居中。例如，下面的代码可以实现一个图片和文字垂直居中的效果：

<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元素设置为flex布局，并使用align-items来将元素垂直居中。我们还设置了flex-wrap为wrap，这样如果文字过长，它会自动换行。容器的高度设置为300px，并给图片设置了一个固定的高度。 注意，这种方法只适用于单行文本。如果你需要对齐多行文本，需要使用一些不同的技巧。 另一种方法是使用CSS的transform属性。我们可以将图片的位置相对于文字进行微调。例如，下面的代码可以实现一个多行文本和图片垂直居中的效果：

<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属性设置为relative。然后，我们将p元素的position属性设置为absolute，并使用top: 50%和transform: translateY(-50%)来将多行文本垂直居中。同样，我们将图片的position属性设置为absolute，并使用top: 50%和transform: translateY(-50%)将其垂直居中。我们还将图片的right属性设置为0，这样它就会像文本一样从右边对齐。 不管你使用哪种方法，都可以轻松地实现图片和文本的垂直对齐。同时也可以尝试一些其他方法，找到适合你的技巧。