pomoc s css - centrování obrázků

[shadow]

Pro svůj blog používám následující část kódu css:

Kód: Vybrat vše

* Begin Images */

p img {
padding: 0;
max-width: 100%;
}

.alignright {
float: right;
}

.alignleft {
float: left;
}

img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright, img[align="right"] {
padding: 0px;
margin: 3px 3px 1px 10px;
display: inline;
}

img.alignleft, img[align="left"] {
padding: 0px;
margin: 3px 10px 1px 3px;
display: inline;
}
/* End Images */

Align left a align right obrázků mi funguje, ale potřeboval bych obrázek zobrazit i horizontálně ve středu, tj. vycentrovat ho. Nějak mi to nefunguje. Nevíte jak to udělat? Prostě text nad obrázkem a pak pod obrázkem, a obrazek mezitím ve středu screenu.

[N@$ty]

pouzij

Kód: Vybrat vše

v-align: middle;

aspomn me to tak fungovalo.

[zombux]

co tohle? http://www.jakpsatweb.cz/css/css-vertik ... ovani.html

[shadow]

Mně jde o horizontální centrování.

To jest levý okraj stránky.........................střed stránky=obrázek.................. pravý okraj stránky.

Já na to nakonec přijdu, kde je zakopanej pes, chce to jen čas .

A vzhledem k tomu, že ho zase tak moc nemám, tak pokud by mi někdo napsal, jak mám změnit margin (definující v tomto případě mezery mezi obrázky a obtékajícím textem), aby ho pobral i Internet Explorer, tak bych byl vděčný .

[zombux]

řešení horizontálního centrování:

1) nastav objektu margin na auto (konkrétně levej a pravej, jak to napíšeš je věc druhá, způsobů je víc) - tohle zajistí automatický vycentrování v rámci nadřazenýho bloku v mozille/opeře/jakýmkoliv dalším prohlížeči kromě IE

2) kvůli IE nastav text-align na center u nadřazenýho bloku.

hádám že se jedná o img.centered, ten nech nastavenej přesně tak jak je a jeho nadřazenýmu bloku nastav text-align na center.

btw to čemu říkáš alignleft a alignright je ve skutečnosti float model, čili ten blok plave vlevo nebo vpravo a ostatní bloky obtékají kolem něj tam kde je místo.

[shadow]

zombux: thx za podněty a rady.

S vlastním centerování obrázků jsem si už poradil. Sice to vyžaduje ruční úpravu HTML kódu, takže to není ideální řešení, ale zase to nepoužívám tak často, aby mě to nějak obtěžovalo .

Kód: Vybrat vše

<div style="text-align: center">
<img alt="xxxxxxxxx.jpg" id="image40" title="xxxxxxxx.jpg"  src="http://www.shadowblog.cz/.............jpg" />
</div>

takže teď už zbývá jen nefunkční margin v Internet Exploreru.

[shadow]

Problém vyřešen:

http://wordpress.org/support/topic/6743 ... ost-356762

Ale bez Wysiwyg editoru. No, jo, ale co nadělám, když Internet Exploder nevezme složitější CSS kód.

Všichni FF nebo OP nepoužívají .

Další důkaz, jak je IE debilní oproti FF nebo Opeře: Pokud dám zobrazit obrázek širší, než jak je nastavený styl pro "content", tj. pro "obsahové pole", tak IE ho samozřejmě zobrazí celý, vůbec ho nefitne a obrázek jde až do sidebaru. Pro účely IE musím nastavit natvrdo v img tagu vlastnost "width" na šířku obsahového pole.

Zatímco Opera a Firefox to samy o sobě fitnou, udělají to tedy za Vás. Inteligentní prohlížeče .