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