Pozicování (obrázek na střed).

1. Návštěvník B903D6CC 1. 8. 2006 22:53

   Dobrý den. Už strašně dlouho se snažím umístit nějaký obrázek přesně na střed stránky a pořád mi to nejde. Použil jsem několik kódu, které jsou vystaveny na různých webech jako jakpsatweb.cz atd., kde je napsaný: "tímto příkazem umístíte obrázek do středu stránky", ale mně se zobrazí v levým horním rohu. Co je špatně na následujících kódech? 1) v soub.htm: <span style="background-position : center center"><img src="Soubory/obr.jpg" ></span> 2) v styl.css: .stred {background-position: center center} v soub.htm: <div class=stred><img src="Soubory/obr.jpg" ></div> Neměl byste někdo kód, kterej by zaručeně hodil obrázek na střed stránky? :) Předem díky.

2. Návštěvník 9B665C06 1. 8. 2006 23:51

   např. v styl.css: .stred {width: 100%; height: 100%; background-image: URL('Soubory/obr.jpg'); background-repeat: no-repeat; background-position: center center;} v soub. html: <div class="stred"></div>

3. Návštěvník B903D6CC 2. 8. 2006 00:23

   Já se omlouvám, ale mám to opět vlevo nahoře...

4. Návštěvník 9C78D3F7 2. 8. 2006 02:41

   <center> </center>

5. Návštěvník 051EE75A 2. 8. 2006 06:41

   >>Co je špatně na následujících kódech? V obou je stejná chyba. V obou případech centruješ pozadí daného prvku (span, div), ale ani v jednom případě obrázek nezapisuješ jako pozadí (background-image), ale prostě ho zobrazuješ jako ibrázek (img). Jinak mně osobně ladikuv kód funguje - obrázek mám na středu. Zkus sem dát odkaz na stránku, kde ti to nefunguje.

6. Návštěvník B903D6CC 2. 8. 2006 11:26

   To Thalia: Díky za odpověď, zkusím si s tím teda ještě pohrát, ale jinak se mrkni třeba na www.jarekkk.wz.cz/soub.htm.

7. Návštěvník 051EE75A 2. 8. 2006 12:41

   Dobře žes dal odkaz na příklad, jinak by se na to asi nepřišlo ;-) <div class="stred"><img src="Soubory/obr.jpg" ></div> - toto změň na <div class="stred"></div> to stačí, protože v css s tím obrázkem stejně nepracuješ. Ten obrázek tam pak vložíš pomocí css jako pozadí divu "stred" a napozicuješ ho na střed divu: .stred { width: 100%; height: 100%; background-image: URL('Soubory/obr.jpg'); background-repeat: no-repeat; background-position: center center; } - toto změň na .stred { width: 100%; height: 100%; background-image: URL('obr.jpg'); background-repeat: no-repeat; background-position: center center; } t.j. je tam jiná cesta k obrázku. Obrázek i css soubor jsou v odresáři Soubory, proto je to správně takhle.

8. Návštěvník B903D6CC 2. 8. 2006 12:50

   To Thalia: Díky moc! :)

9. Návštěvník 13C864E2 31. 1. 2022 04:01

   Dneska se pozicuje takhle: .HTML <div> <img width="600" height="300" as="image" type="image/webp" alt=" " class="stred"> </div> .CSS .stred { display: block; /* musi se prevest na block, jinak nejde centrovat */ width: 600px; /* musi byt udana sirka, libovolna dle potreby */ margin-left: auto; /* odsazeni z leva */ margin-right: auto; /* odsazeni z prava */ background-image: url(mujObrazek.webp'); background-repeat: no-repeat; background-position: center center; /* vycentruje obrazek vertikalne i horizontalne */ } www.vita.kvalitne.cz

← Zpět na všechna témata