css/ html aligning text above image in unordered list

Issue

I want to be able align my text such that it’s above the image in an unordered list.

This styling is not quite right though because if I resize the window down to a particular point, the images aren’t going to be directly below the respective text. When the window is sized down, I end up getting the text below each other followed by the images which. What should I be doing to get the image directly below it’s respective text regardless of window sizing?

.items>li {
  display: inline-block;
  padding: 0 30px 0 30px;
}

.itemImages>li {
  display: inline-block;
  padding: 0 30px 0 30px;
}
<ul class="items">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

<ul class="itemImages">
  <li><img src="img1.jpg"></li>
  <li><img src="img1.jpg"></li>
  <li><img src="img1.jpg"></li>
</ul>

Solution

If you wrap them in another element, you can use display: table properties.

.parent {
  display: table;
}
.parent > ul {
  display: table-row;
}
.parent > ul > li {
  display: table-cell;
  padding: 0 30px 0 30px;
}
img {
  max-width: 100px;
}
<div class="parent">
  <ul class="items">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
  <ul class="itemImages">
    <li><img src="http://weknowyourdreams.com/images/monkey/monkey-04.jpg"></li>
    <li><img src="http://weknowyourdreams.com/images/monkey/monkey-04.jpg"></li>
    <li><img src="http://weknowyourdreams.com/images/monkey/monkey-04.jpg"></li>
  </ul>
</div>

But if you can put the text and image in the same element, that’s what you should do, rather than having 2 lists.

li {
  display: inline-block;
  padding: 0 30px;
  text-align: center;
}
img {
  display: block;
  max-width: 100px;
}
<ul>
    <li>item1<img src="http://weknowyourdreams.com/images/monkey/monkey-04.jpg"></li>
    <li>item2<img src="http://weknowyourdreams.com/images/monkey/monkey-04.jpg"></li>
    <li>item3<img src="http://weknowyourdreams.com/images/monkey/monkey-04.jpg"></li>
</ul>

Answered By – Michael Coker

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published