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!

That's not CSS. Please update the tags on your question. – j08691 Jul 30 '15 at 14:26 — j08691, Jul 30 '15 at 14:26

score 0 · Answer 1 · answered Jul 30 '15 at 14:24

0

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>

answered Jul 30 '15 at 14:24

arodriguezdonaire

5,396
1
26
50

awbemauler · Answer 2 · 2015-07-30T14:33:58.777

0

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;
}

edited Jul 30 '15 at 14:33

answered Jul 30 '15 at 14:28

awbemauler

151
10

Hi, i put text-align:center on div element because i want that my img to be centered. – OSOMAN Jul 30 '15 at 14:30
That is not how you center an image. you need to set the property to block, and center it using margin. – awbemauler Jul 30 '15 at 14:33
Why it is necessary to set text-align to a element if i can center my img with margin:auto? – OSOMAN Jul 30 '15 at 14:37
1

You tell me. I was assuming you just wanted to center text. You no longer need `text-align:center;` if you're centering an image. – awbemauler Jul 30 '15 at 14:41
1

Whoever downvoted, please tell me why so I can improve my answer. – awbemauler Jul 30 '15 at 14:43
The question isn't CSS but you've replied with a CSS solution. Your comment on the height says it all. Also your first comment on here is completely false: https://jsfiddle.net/c45yv075/. – Jamie Barker Jul 31 '15 at 10:31

Put a div over a tag a inside li

2 Answers2