CODEWITHSUNDEEP
htmlcssimagetextword-wrap
John
John

Reputation: 473

Wrapping Text Pushing Image Above It Up When

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.

3rd Image is pushed up

Upvotes: 1

Views: 2672

Answers (3)

joshua.thomas.bird
joshua.thomas.bird

Reputation: 705

You can float the icons left in the container, and cause the container to trigger a reflow to contain the icons.

.icon {
    float: left;
    display: block;
}

.container {
    overflow: hidden;
}

Upvotes: 0

Peter Cadwell
Peter Cadwell

Reputation: 109

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

.icon {
  vertical-align: top;
}

Upvotes: 6

happymacarts
happymacarts

Reputation: 2604

You could wrap it in a flex container great write up on flex here

  .icon {
    display: inline-block;
    width: 150px;
  }
  .container{display:flex}
 <div class="container">
 <div class = "icon">
    <a href = "#">
     <img src = "http://placehold.it/150x150" />
     <h3>Some Text</h3>
   </a>
  </div>
   <div class = "icon">
    <a href = "#">
     <img src = "http://placehold.it/150x150" />
     <h3>more Text</h3>
   </a>
  </div>
   <div class = "icon">
    <a href = "#">
     <img src = "http://placehold.it/150x150" />
     <h3>Some Longer Text with 2 lines</h3>
   </a>
  </div>
  </div>

Upvotes: 1

Related Questions