Member Avatar for suavedesign

I am trying to align some text vertically with an image next to it, as in:
On the bottom half of the page, you can see that I have a bunch of images, each one with some text next to it. I want the text to appear in the middle of each icon, not on the top, as it is now. I tried putting

vertical-align:middle

on the text, put it didnt work.
What is the correct way of doing this?

  • 2 Contributors
  • 2 Replies
  • 344 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by flashhtml5

Dani AI

Generated

— the cleanest, most reliable fix is to keep each icon and its label inside the same container and let CSS do the centering. The approaches in the thread (trying to change the text’s vertical alignment directly or inserting extra <br>s, as suggested) are brittle because they depend on the elements’ display modes and any site-wide CSS reset.

Why it was failing

  • If the image or the text is a block-level element or is floated, vertical alignment on the text won’t affect layout.
  • Vertical alignment works only in inline/table-cell contexts, so you must ensure both pieces are in the same formatting context.

Recommended solution (flexbox)

  • Put icon + text together and use flexbox to center them vertically. This works for single- or multi-line labels and is responsive.

HTML

<div class="icon-item">
  <img src="icon.png" alt="icon description">
  <div class="label">Event title or short description</div>
</div>

CSS

.icon-item {
  display: flex;
  align-items: center;   /* vertical centering */
  gap: 10px;             /* space between icon and text */
}
.icon-item img {
  width: 48px;           /* or set height and keep auto width */
  height: auto;
  display: block;
}

Tips and fallbacks

  • If flexbox isn’t available, use an inline layout (ensure the image/text are inline-level) or table-cell fallback so vertical centering applies.
  • Use DevTools to check computed display and whether the image is floated or overridden by a reset.
  • Avoid inserting layout <br> hacks; they break responsiveness and accessibility.
  • Always include meaningful alt text for icons.

This approach keeps the markup simple, works across browsers that support flexbox, and handles multi-line labels without manual padding or fragile hacks.

Member Avatar for flashhtml5

Try what 'Troy III' says in this thread on daniweb.

You will have to place the <img> and <span> tags in a <div>.

Regards - Shawn

Edited by flashhtml5 because: typo
Member Avatar for flashhtml5

I actually tried out several solutions, but the base CSS you use is interfering with the solutions.

I would suggest that you add a <br/> before the text of the words you want "more" centered. For example:

<span style="supportText"><br/>Walks, Runs <br />& Bikeathons</span>

Note the <br/> immediately after the span tag.

Edited by flashhtml5 because: typo
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.