dotNETportal.cz

Dobrý den.

Řeším jednoduchý problém, ale pořád si s ním nevím rady.

Potřebuji na stránce umístit obrázek do prosted rámečku.

Mám pevně daný čtvercový rám a obrázky co jsou na výšku mám pěkně uprostřed, ale jakmile mi přijde obrázek na šířku, tak visí v horní části a nevím jak ho vycentrovat na střed.

Které parametry mi zajistí aby byl obrázek vždy veprostřed?

pokoušel jsem se takto, ale to nefunguje (nejspíš je to prostředek řádku)

text-align:center;
vertical-align:middle;

Děkuji za radu.

Zkus to takhle :

#b_1 {display: table;width: 200px;height: 200px;}
#b_2 {display: table-cell;vertical-align: middle;}

No a v HTML je to pak

<div id="b_1">
  <div id="b_2">
    <img src="uprostred.png">
  <div>
</div>

Jenže narazíš na IE, který to nepochopí, protože neumí (alespoň verze 7) předefinovat blokový prvkek (div) na tabulku.

U IE by to mělo být funkční následovně (ale budeš si muset odchytit IE přes nějaký css hack)

#b_1 {position: relative; }
#b_2 {position: absolute; top: 50%;}
#b_3 {position: relative; top: -50%;}

No a HTML

<div id="b_1">
  <div id="b_2">
    <div id="b_3">
      .... obrázek ....
    </div> 
  </div>
</div> 

PS: je to psáno od boku, nezkoušel jsem to