CODEWITHSUNDEEP
htmlcss
Javacadabra
Javacadabra

Reputation: 5758

Text wrapping onto second line pushing img up in unordered list

I've run into this problem a few times and I'm wondering if anyone could offer any assistance.

I've got the following html:

<ul>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>Very Long List Item 1</span></li>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>List Item 2</span></li>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>List Item 3</span></li>
</ul>

The CSS:

ul li{
  list-style-type:none;
  display:inline-block;
  text-align:center;
  width: 100px;
}
ul li img{
  width: 100px;
  display:block;
  margin:0 auto;
  margin-bottom:20px;
}

Is there a way I can get the text to wrap so the image isnt pushed up??? 

ul li{
  list-style-type:none;
  display:inline-block;
  text-align:center;
  width: 100px;
}
ul li img{
  width: 100px;
  display:block;
  margin:0 auto;
  margin-bottom:20px;
}
<ul>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>Very Long List Item 1</span></li>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>List Item 2</span></li>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>List Item 3</span></li>
</ul>

Upvotes: 0

Views: 45

Answers (3)

Qwertiy
Qwertiy

Reputation: 21400

ul li{
  list-style-type:none;
  display:inline-block;
  text-align:center;
  width: 100px;
  vertical-align: top;
}
ul li img{
  width: 100px;
  display:block;
  margin:0 auto;
  margin-bottom:20px;
}
<ul>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>Very Long List Item 1</span></li>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>List Item 2</span></li>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>List Item 3</span></li>
</ul>

Upvotes: 1

Conor Cussell
Conor Cussell

Reputation: 161

Add Vertical Align Top to the li

ul li{
  list-style-type:none;
  display:inline-block;
  vertical-align: top;
  text-align:center;
  width: 100px;
}
ul li img{
  width: 100px;
  display:block;
  margin:0 auto;
  margin-bottom:20px;
}
<ul>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>Very Long List Item 1</span></li>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>List Item 2</span></li>
<li><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png'/><span>List Item 3</span></li>
</ul>

Upvotes: 2

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

Just add vertical-align

CSS

ul li{
  list-style-type:none;
  display:inline-block;
  text-align:center;
  width: 100px;
  vertical-align: top;
}

DEMO HERE

Upvotes: 1

Related Questions