Question

Here is my page structure;

I have images inside all “li” below. I am trying to align these images inside the li elements. I am trying to do this with setting right and left margin to auto but it is not working.

Here is the css;

#navcontainer ul li
{
    display: inline-block;
    width:80px;
}

#navcontainer ul li img
{
    margin-right:auto;
    margin-left:auto;
}

I am sure it is not about accessing the element from css, bcs when I set the width or height or any other thing in the css it is working. But I didnt manage to align it to the center.

Answer 1

If they’re inline-block, simply use text-align: center on the parent li elements.

If they’re display: block, then you can use margin: 0 auto 0 auto (top,right,bottom left).

It’s also worth pointing out that the only valid children of a ul or ol are li elements. Any other content must be wrapped in an li, otherwise the mark-up is invalid, and then the user-agent tries to correct the mark-up when preparing the DOM. And not consistently across the various user-agents.

Using the following mark-up as a demonstration:

<ul>
    <li class="inlineBlock"><img src="http://lorempixel.com/100/100/sports" /></li>
    <li class="block"><img src="http://lorempixel.com/100/100/nature" /></li>
</ul>​

With the following CSS:

li.inlineBlock {
    text-align: center;
}
li.inlineBlock img {
    display: inline-block;
}

li.block img {
    display: block;
    margin: 0 auto 0 auto;
}​

JS Fiddle demo.