Hvorfor centreres billederne ikke?

Brug margin-left: auto og margin-right: auto så vil billedet blive centreret :-)

.. eller bare margin: auto;

Et par faktorer:

- Med display:inline ignoreres width:500px - boksen bliver så lille som muligt.

- margin:auto virker kun på elementer med display:block OG width:123px
(og virker kun i bredden, ikke højden..  jeg bruger det ALDRIG)


Den rigtige måde at centrere indhold i en boks, er at benytte:
text-align:center på boks-elementet (li'en) - ingenting på dét som skal centreres:

<li style="display:inline-block; width:500px; text-align:center">
    <img src="hej2.jpg">
</li>

Navnet "text-align" er lidt misvisende, gælder ikke kun tekst, men alle ikke-fuld-bredde-blok elementer.

Men hele din <ul><li><img> struktur lidt overflødig (introducerer bare forvirring (og marginer))

Hvis jeg gætter rigtigt, vil du vise billeder side-om-side HVIS der er plads
- hvis ikke (mobil/smal browser) så bare oven over hinanden.

Det gør du enklere uden listen:
<span class=w500><img src=hej1.jpg></span>
<span class=w500><img src=hej2.jpg></span>
<span class=w500><img src=hej3.jpg></span>
- med .w500 {display:inline-block; width:500px; text-align:center}

blueeyes og cfuttrup -> Jeres forslag fungerer ikke i givet kodeeksempel.

T4NK32 -> Det var lige det svar jeg ledte efter. Jeg havde godt på fornemmelsen at det var derhenne af, men godt at få det bekræftet. Tak for svar, du skal have point. Lig et svar.

Kommer her