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

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.

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>

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

<center> </center>

>>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.

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.

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.

To Thalia: Díky moc! :)

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