Member Avatar for Gearspro

I did see a similar post on here about this, but it with mixed with javascript also and I found it confusing.

So if someone could help it would be much appreciated.

I wish to align my icons on my contact page like this:

(it's easier to just show a picture than to explain)

but for some reason I can only get them to be centered all in line underneath one another.

and heres the html version as shown with my problem.

any ideas on correcting this problem? please and thank you c:

  • 3 Contributors
  • 2 Replies
  • 97 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by drjohn

Dani AI

Generated

The icons are stacking because each icon/link is being treated as a full-width box by the CSS that’s active on the page (either a global rule, a framework utility, or missing per-icon markup). and are on the right track: grouping each icon with its label is essential, and making the group participate in a horizontal layout is the simplest fix. Instead of floats or old tricks, a small per-icon container plus a row-level layout gives predictable results and keeps captions under each icon.

A straightforward, modern pattern uses semantic containers so each icon+label is one item, and the row lays those items out and centers them. Example markup and styles:

<!-- HTML -->
<div class="contact-row">
  <a class="contact" href="#">
    <figure>
      <img src="icons/email.png" alt="Email">
      <figcaption>Email</figcaption>
    </figure>
  </a>
  <!-- repeat items -->
</div>

<!-- CSS -->
.contact-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.contact figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact img {
  width: 48px;
  height: auto;
}

.contact figcaption {
  margin-top: 6px;
  font-size: 0.9rem;
}

If that doesn’t immediately fix the live page, use the browser inspector to check computed styles for the anchor and the image: look for a rule that forces them to span the full line or makes images expand to container width (framework/responsive-image rules commonly do this). Temporarily add visible outlines to the icon containers to see how wide each item actually is. If using a CSS framework, remove or override the framework image utility for these small icons. Also verify each image has an appropriate intrinsic size or explicit width so the layout behaves consistently.

Accessibility note: include meaningful alt text for icons and ensure keyboard focus outlines remain visible for the anchor elements.

Recommended Answers

All 2 Replies

Member Avatar for twiss

As a start, you need to give them display:inline-block; and a width (probably 150px), and the parent should have text-align:center; .

Member Avatar for drjohn

Create a div, give it a class name, a width equal to the four icons plus any padding between them, and margin :auto
float the img / icon in the div left.
add the text in another div below this (same class name)
add the next set of icons in another div below this. (same class name)

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.