Member Avatar for veledrom

Hi,

I want an image and text appear side by side and also text should be vertically align in the middle so it looks on line. Code below doesn't work properly. Text goes to bottom.

Thanks

<span style="display:inline;"><img src="image.png" alt="loader" /></span>&nbsp;<font style="display:inline;vertical-align:middle;">Title here</font>
  • 2 Contributors
  • 2 Replies
  • 123 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by veledrom

Dani AI

Generated

As hinted, the issue is not the wrapper but how inline elements are aligned: the image is an inline replaced element and its default alignment sits on the text baseline, so the text can look lower than the image. Two reliable ways to get an image and text perfectly level are (A) use modern flexbox so the container handles vertical centering, or (B) use inline-block on both elements and apply vertical-align: middle.

Here is a simple flexbox pattern that centers regardless of image height:

<div class="media">
  <img src="image.png" alt="loader" />
  <span>Title here</span>
</div>
.media { display: flex; align-items: center; }
.media img { margin-right: 8px; /* spacing */ }

If you need broader legacy support, the inline-block approach works well:

<span class="media">
  <img src="image.png" alt="loader" />
  <span class="label">Title here</span>
</span>
.media img,
.media .label { display: inline-block; vertical-align: middle; }
.media img { margin-right: 6px; }

Troubleshooting tips: check that no global reset sets your img to display: block (that prevents vertical-align from applying); ensure the image has loaded or a set height so the line box is predictable; avoid deprecated <font> tags and use semantic markup + CSS. For behavior details see MDN’s notes on vertical-align and a concise intro to Flexbox.

Recommended Answers

All 2 Replies

Member Avatar for JorgeM

The vertical-align property can be applied to the image, not the span elements. In addition, if you want to center it in the page, you can wrap this with a div and apply the text-align:center property.

<div style="text-align:center;">
  <img src="#" alt="loader" style="vertical-align:middle;" />
  Title here
</div>
Member Avatar for veledrom

Thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.