Css zarovnání obrázku na výšku   otázka

HTTP/HTML

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.

nahlásit spamnahlásit spam 0 odpovědětodpovědět

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

nahlásit spamnahlásit spam 0 odpovědětodpovědět
                       
Nadpis:
Antispam: Komu se občas házejí perly?
Příspěvek bude publikován pod identitou   anonym.
  • Administrátoři si vyhrazují právo komentáře upravovat či mazat bez udání důvodu.
    Mazány budou zejména komentáře obsahující vulgarity nebo porušující pravidla publikování.
  • Pokud nejste zaregistrováni, Vaše IP adresa bude zveřejněna. Pokud s tímto nesouhlasíte, příspěvek neodesílejte.

přihlásit pomocí externího účtu

přihlásit pomocí jména a hesla

Uživatel:  
Heslo:  

zapomenuté heslo

 

založit nový uživatelský účet

zaregistrujte se

 
zavřít

Nahlásit spam

Opravdu chcete tento příspěvek nahlásit pro porušování pravidel fóra?

Nahlásit Zrušit

Chyba

zavřít

feedback