CSS 图片文字顶部对齐是一种常见的排版需求，它能使网页中的图片和文字能够更加美观、整洁地呈现。同学们经常会发现，在网页中使用图片和文字进行排版时，由于图片和文字的尺寸不一样，文字可能会出现在图片的下面，这样会破坏网页的视觉效果。那么，下面我们就来介绍一下如何通过使用 CSS 来实现图片和文字顶部对齐。

CSS 代码如下所示：
img {
vertical-align: middle;
}

以上代码中，我们使用了vertical-align属性来实现图片和文字的顶部对齐。这个属性的作用是设置元素的垂直对齐方式，middle参数表示元素与父元素的中心线对齐。当我们将这个属性应用到图片上时，它就能够跟文本进行顶部对齐。

下面，我们来介绍一下在实际使用中如何应用这个 CSS 属性。假设我们需要在网页中加入一张图片和一些文字，代码如下所示：

<div class="wrapper">
<img src="example.png">
<p>这里是一段文字。</p>
</div>

以上代码中，我们使用了一个div元素来包含图片和文字。接下来，我们就可以在 CSS 文件中添加前面提到的代码，如下所示：

img {
vertical-align: middle;
}
p {
display: inline-block;
vertical-align: middle;
}

我们在这里还添加了一个display: inline-block属性来将p元素变成行内块状元素，这样就能够让图片和文字在水平方向上对齐，从而更加美观。

以上就是使用 CSS 来实现图片和文字顶部对齐的方法，希望对同学们有所帮助。