Centrování DIVu s neznámou šířkou

[<01+@]

Dělám web dělaný pomocí DIV centrovaného designu. Uprostřed DIVu mám obrázky, které potřebuju vycentrovat - problém je v tom, že v jednom řádku může být víc nebo míň obrázků a centrovaný DIV musí mít fixní šířku, jinak to není podle specifikace a hlavně to nefunguje...
Nechci tam rvát klasické HTML typu

Kód: Vybrat vše

<p align=center>bla bla bla nějaké DIVY s obrázky s popisy</p>[/c

, chci všechno nastavovat přes CSS.
A taky to nechci dělat prasecky přes absolutní pozicování.
Je nějaká cesta jak to udělat jinak?
Příklad: http://www.zus-nmps.wz.cz/index.php?co=obory&jaky=1 - chci aby byly obrázky s popisky vycentrované v "pyramidě postavené na špičku"...[/url]

[<01+@]

OK, hodím dotaz asi spíš do poradny... sem to tak úplně nepatří.

[Petra]

Ale obrázky přece stejně nemůžou lítat jentak ve vzduchu a to <p> kolem nich být musí. Tak pak už jen ve stylech text-align:center.

[<01+@]

Ony nelítají ve vzduchu.... já sem teda hodím kus zjednodušeného

Kód: Vybrat vše

<style>
div {padding: 5px 0px; position: relative; margin: 0px auto; clear: both}
div.centrujici {width: 100%; text-align: center}
div.o {margin: 10px 0px; padding: 0px; width: 160px; text-align: center; clear: none; cursor: pointer; cursor: hand; float: left}
</style>
...
<div class="centrujici">
<div>
<div class="o">Zobcová flétna<br><img src="./o/obory/malyfletna.jpg"></div>
<div class="o">Akordeon<br><img src="./o/obory/malyakordeon.jpg"></div>
<div class="o">Kytara<br><img src="./o/obory/malykytara.jpg"></div>
<div class="o">Klavír<br><img src="./o/obory/malyklavir.jpg"></div>
</div>
<div>
<div class="o">Flétnový komorní soubor<br><img src="./o/obory/malyfks.jpg"></div>
<div class="o">Píšťalky<br><img src="./o/obory/malypistalky.jpg"></div>
<div class="o">Linduška<br><img src="./o/obory/malylinduska.jpg"></div>
</div>
</div>
[/code]

Tedy - nejmenší DIVy třídy "o" obsahují obrázek s doprovodným textem. Těchto brázků je 1-4 v nadřazeném DIVu, ten nemá třídu.
Tyto "řádkové" DIVy bez třídy mají nadřazený DIV třídy "centrujici" - po tom chci, aby centroval ony řádkové DIVy, ale neděje se tak, protože se (řádkové) automaticky roztáhnou přes celý nadřazený prvek... Ale nemůžu jim dát absolutný šířku, protože potřebuju aby skupina DIVů "o" byla na středu.... Nenapadá mě pořád jak to udělat, kromě variant které jsem zavrhl - v nejhorším dám každému řádkovému DIVu pevnou šířku podle obsahu, ale doufám v jiné, elegantnější řešení...

Jinak se omlouvám, že to neřeším v poradně, ale ta nemá zdaleka takové schopnosti jako toto fórum a navíc se mi nepovedlo ani napotřetí přidat dotaz... Přetože jsem odstranil všechny speciální znaky.

[vapmartin]

Zkus toto:
zrušit: float:left;
řádku dát: margin: auto;

Kód: Vybrat vše

  <style>
  .obal { text-align: center }
  .radek  { margin: auto; display: table; }
  .obrazek  { width: 170px; display: table-cell; }
  </style>

    <div class="obal">
      <div class="radek">
        <span class="obrazek">popis<img src="./images/xxx.gif" width="150px"></span>
        <span class="obrazek">popis<img src="./images/xxx.gif" width="150px"></span>
        <span class="obrazek">popis<img src="./images/xxx.gif" width="150px"></span>
        <span class="obrazek">popis<img src="./images/xxx.gif" width="150px"></span>
      </div>
      <div class="radek">
        <span class="obrazek">popis<img src="./images/xxx.gif" width="150px"></span>
        <span class="obrazek">popis<img src="./images/xxx.gif" width="150px"></span>
        <span class="obrazek">popis<img src="./images/xxx.gif" width="150px"></span>
      </div>                 
    </div>

[<01+@]

Super, funguje to, ale naneštěstí mi to nejede v IE... Tak nevím jestli se s tím smířím, nebo se pokusím ještě něco vymyslet...

[Shaky]

Super, funguje to, ale naneštěstí mi to nejede v IE... Tak nevím jestli se s tím smířím, nebo se pokusím ještě něco vymyslet... /quote]

v IE je problem s tim, ze IE nezna neco jako margin:auto; proste microsoft musi mit zase neco extra - tam by se to prave zarovnalo text-align:center; cimz se ti zase pohne zarovnani textu - jako neni to jednoduche

[<01+@]

Já jsem to už udělal přes tabulku, i když to nevypadá tak hezky... To už je ale můj problém V IE se mi to nepodařilo ani přes text-align, protože pak se obrázky zobrazí pod sebou, ať je narvu do kolika (bezrozměrných) DIVů chci...