Put a div over a tag a inside li

Question

I have the following html code:

<ul class="ul">
   <li class="li">
        <a href="#;" class="a">Link</a>
        <div class="div"> <img src="photo.jpg" /> </div>
    </li>
</ul>

And the following CSS:

ul.ul {
   background-image: url(text.png);
   background-repeat: no-repeat;
   background-position: 100% 0;  
   >li.li{
    height: 80px;
    min-width: 68px;

    background-repeat: no-repeat;
    background-position: 50% (72px-32px-12px);
    color: #fff;

    >a {
        line-height:8px;
        margin-top: 12px;
        color: #fff;
        font-weight: bold;
        padding-bottom: 10px;
        height: (80/2+14);
    }

    >div.div{
        text-align: center;
    } 

}

And my div is under element "a" and i want to put it over element a. In firebug seems that div is outside of li. Could you tell me what is wrong?

Thank you!

Answer 1

Just put 'a' and the div in separate li's:

<ul class="ul">
    <li class="li">
        <div class="div"> <img src="photo.jpg" /> </div>
    </li>   
    <li class="li">
        <a href="#;" class="a">Link</a>
    </li>
</ul>

Answer 2

I dont know what you're trying to accomplish by having a div with a class name of div with only text-align: center;. If its centering the text you want, you can wrap that ul with the div. Or a better solution;

a {
    line-height:8px;
    margin-top: 12px;
    color: #fff;
    font-weight: bold;
    padding-bottom: 10px;
    height: 5px; /* Idk why you had that the way it was... thats not css */
    text-align: center;
}

Now that we know what you want, we can actually help you. To center an image, do this.

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}