网站Features模块文字与图片垂直对齐问题求助

Hey everyone, I'm stuck on a seemingly simple problem while building the Features section of my website: I can't get my text and images to align vertically in the center.

I've already tried two common fixes:

• Adding vertical-align: middle; to the image's CSS
• Wrapping the text in a <span> tag to adjust the layout

Neither of these worked, and none of the solutions I found on forums or YouTube have helped either. The effect I want is straightforward (here's what I'm aiming for: Expected vertical alignment), so I'm attaching my relevant code below in hopes someone can point out what I'm missing!

My Current Code #

HTML

<div class="feature-card">
  <img src="feature-icon.svg" alt="Feature icon">
  <span>Streamline your workflow with our intuitive tools</span>
</div>

CSS

.feature-card {
  margin: 1rem 0;
  padding: 0.5rem;
}

.feature-card img {
  width: 32px;
  height: 32px;
  vertical-align: middle;
}

.feature-card span {
  margin-left: 0.5rem;
}

What I've Tried So Far #

• Applied vertical-align: middle; directly to the image (no visible change)
• Wrapped text in <span> and <div> tags separately (still misaligned)
• Followed multiple tutorial solutions for inline/inline-block alignment (none resolved the issue)

If anyone has ideas or can spot a mistake in my code, I'd really appreciate the help!

内容的提问来源于stack exchange，提问作者Vandal