Autor Zpráva
Darker
Profil
Potřeboval bych čistě pomocí CSS vycentrovat obrázek jak horizontálně tak vertikálně v rámci divu. Všechny návody na vertikální centrování se mi praly s tím, jak jsem vyřešil centrování horizontální.
Html:
<div class="g_center"><div><img src="obrázek" /></div></div>
CSS
DIV.g_center {
       text-align:center;
       display: block;
}
DIV.g_center DIV {
       width:400px;
       height:300px;
       margin: 0px auto;
       display: block;
       vertical-align: middle;
       background:gray;
       border:2px groove black;
}
DIV.g_center IMG {
       max-width:400px;
       max-height:300px;
}
Živá ukázka.
peta
Profil
Muzes obrazek dat jako pozadi background-image.
Muzes pouzit tabulkovy layout, display:table, table-row, table-cell.
Koukal jsi na zpusoby na jpw?
Vertikální centrování v CSS
Vycentrování obsahu stránky
panther
Profil
peta:
Muzes pouzit tabulkovy layout, display:table, table-row, table-cell.
nemůže, podpora není napříš celým (používaným) spektrem prohlížečů.
Plaváček
Profil
Darker:

Pomohla by ti tato ukázka? http://klient.plavacek.net/centrovani.html
peta
Profil
panther: To nebylo soucasti dotazu.
panther
Profil
peta:
to je snad předpoklad, že řešení zde uvedené by mělo být funkční, ne? Pokud není, je vhodné to dodat.
Darker
Profil
peta:
Muzes pouzit tabulkovy layout, display:table, table-row, table-cell.
To se mi pralo s horizontálním centrováním. Potřebuji centrovat v kontextu dokumentu, ne udělat lightbox.

Plaváček:
Děkuju. Věděl bys jak teď ten šedý div vycentrovat horizontáně? Vždy se mu povedlo buď horizontální nebo vetrikální centrování, nikdy obojí.
Plaváček
Profil
Darker:

Použiješ další DIV a ten klasicky horizontálně vycentruješ (margin: 0 auto), viz refresh http://klient.plavacek.net/centrovani.html
Lorem
Profil *
Darker :
Pokud jsi problém stále nevyřešil =), zkus :

.centrovany_div (nebo obrázek)  {
       float:left;
       position:absolute;
       top:50%;
       left:50%;
       margin-top:-200px;
       margin-left:-200px;
       width:400px;
       height:400px;
}

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0