css - Insert image on top of each li text

Question

What would be the best way to insert a small image on-top of each list element? like this :

Thanks for any help!

i tried this but its not look like the image !

.top-menu-ul {
    float: right;
    list-style: none;
    text-decoration: none;
    font-size: 12px;
    color: #fff;
}

.top-menu-ul li {
    float: right;
    margin: 50px 20px;
}

<ul class="top-menu-ul">
  <li><img align="center" src="imgz/icon.png" alt=""><a href="">TEXT</a></li>
  <li><img align="center" src="imgz/icon.png" alt=""><a href="">TEXT</a></li>
  <li><img align="center" src="imgz/icon.png" alt=""><a href="">TEXT</a></li>
</ul>

What is the problem with making each element a div container that has two elements (can be sub divs) with each containing an img and a text element respectively? Have you tried anything yet? If so please share your code so we can have an idea and help better. — Hassan, Jun 26 '17 at 14:03

score -1 · Answer 1 · answered Jun 26 '17 at 14:29

A simple <br/> between the elements, and some centering should do it:

.top-menu-ul {
  list-style: none;
  text-decoration: none;
  font-size: 12px;
  color: #fff;
}

.top-menu-ul li {
  border-right: 1px solid #dddddd;
  float: left;
  margin-right: 10px;
  padding: 10px;
  text-align:center;
}

.top-menu-ul > :first-child
{
  border-left:solid 1px #dddddd;
}

.top-menu-ul li img {
  margin-bottom: 5px;
}

<ul class="top-menu-ul">
  <li><img align="center" src="imgz/icon.png" alt=""><br/><a href="">TEXT</a></li>
  <li><img align="center" src="imgz/icon.png" alt=""><br/><a href="">TEXT</a></li>
  <li><img align="center" src="imgz/icon.png" alt=""><br/><a href="">TEXT</a></li>
</ul>

That is really not the [proper way to use `
`](https://www.w3.org/TR/html5/text-level-semantics.html#the-br-element) and we shouldn't tell people to use it like that — Asons, Jun 26 '17 at 14:47

css - Insert image on top of each li text

1 Answers1