Wrapping Text Pushing Image Above It Up When

Question

I need a little help preventing some text below and image from pushing the image up when it wraps. Please see the attached image to best understand what I'm talking about. The goal is to get all of the icons lined up horizontally and have "This Text Is" line up with "Some Text" and "More Text". "Longer" should be below everything else on its own line.

Each of the icons and text are wrapped in their own container divs like so:

  <div class = "icon">
    <a href = "#">
     <img src = "icon.png" />
     <h3>Some Text</h3>
   </a>
  </div>

Here's the CSS which I'm using to create fixed width columns:

  .icon {
    display: inline-block;
    width: 150px;
  }

It seems like the "display: inline-block" is causing the problem, but if I change it to "inline" the icon divs lose their fixed width. Using margin, padding, or positioning to move the icons that are being pushed up back down is not a valid solution because that would get messy. There are 10 icons total and the icon div width changes depending on the browser width (which makes the text wraps at different points depending on the browser width). I was hoping there was an easy CSS solution such as "vertical-align" (which didn't work).

Any help would be greatly appreciated.

Answer 1

You said vertical-align did not work. This should align images that have an equal height to the top:

.icon {
  vertical-align: top;
}