CODEWITHSUNDEEP
htmlcss
Joe Ainsworth
Joe Ainsworth

Reputation: 571

How to align image above unordered list items

enter image description here

I have an unordered list item element with some list items and links. Above each link I would like to show an image. I would like the text to be horizontally aligned below the relevant image.

<ul>
  <li><a href="#" class="link">Accounts</a></li>
  <li><a href="#" class="link">Search</a></li>
  <li><a href="#" class="link">Bag</a></li>
</ul>

This is my CSS

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  display: inline-block;
}

li a:before {
  display: block;
  width: 50px;
  height: 50px;
  background: url('http://placehold.it/50x50') no-repeat center;
  content: '';
  margin-bottom: 5px;
}

Upvotes: 0

Views: 283

Answers (2)

APAD1
APAD1

Reputation: 13666

Just add text-align:center to the li and a left/right margin of auto for the pseudo element and then you can go one step further and set a width for the li so that they're all the same width regardless of the length of the text.

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  width:75px;
  display: inline-block;
  text-align:center;
}

li a {
  display:block;
}
  li a:before {
    display: block;
    width: 50px;
    height: 50px;
    background: url('http://placehold.it/50x50') no-repeat center;
    content: '';
    margin:0 auto 5px;
  }
<ul>
  <li><a href="#" class="link">Accounts</a></li>
  <li><a href="#" class="link">Search</a></li>
  <li><a href="#" class="link">Bag</a></li>
</ul>

Upvotes: 3

sol
sol

Reputation: 22919

An alternative solution using flexbox.

You can make the a element a flex container, and center the content horizontally. 

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  display: inline-block;
}

a {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 4em;
}

li a:before {
  display: block;
  width: 50px;
  height: 50px;
  background: url('http://placehold.it/50x50') no-repeat center;
  content: '';
  margin-bottom: 5px;
}
<ul>
  <li><a href="#" class="link">Accounts</a></li>
  <li><a href="#" class="link">Search</a></li>
  <li><a href="#" class="link">Bag</a></li>
</ul>

Upvotes: 2

Related Questions