Printable View
Ahoj,
celý den hledám na netu postup jak dosáhnout pomocí CSS vycentrování objektu na stránce, tj. horizontální i vertikální. Potřebuju aby kód byl validní a zároveň funkční minimálně ve FF3 i IE6+
Simple stránka, uprostřed obrázek, nad a pod obrázkem řádek textu...
Poradí někdo :?:
PS: Bez použití tabulek!
Dá se to udělat nějak takto:
Nevýhoda že je potřeba dopředu znát velikost, k vidění.Kód:<html>
<head>
<style>
#box-wrapper { position: absolute; left: 50%; top: 50%; }
#box { width: 300px; height: 100px; position: relative; left: -150px; top: -50px; background: silver; }
</style>
</head>
<body>
<div id="box-wrapper">
<div id="box">Lorem ipsum...</div>
</div>
</body>
</html>
Super, tohle naprosto stačí (jak jednoduché Watsone...)
Už jsem z toho začal magořit. Fixní čísla nejsou problém, ten kód generuje PHP, tak si to pole obrázku vypočítá aktuální.
K+
elegantněji bych doporučil obalit to, co se má centrovat do wrap divu, nastavit mu přes css width i height v pixelech, a potom mu dát akorát margin: auto;
Tohle to ale vycentruje jen horizontálně a nefunguje to v IE.Citace:
Původně odeslal Keymaster
hm, nějak jsem měl za to že to funguje i vertikálně. Každopádně v IEčku to funguje, jen se nesmí použít XML preambule.
jj, na tohle sem taky narazil (přímo na stránkách W3C), ale systém je celý v XHTML a nechce se mi kvůli jedné stránce překopávat hlavičky.Citace:
Původně odeslal Keymaster
Nehledejte v tom žádnou záludnost. Chci na pár stránek vyvěsit "servisní hlášku" s obrázkem a protože to chci uprostřed, na takové prkotině jsem se zasekl na celej den :mad:
A nestacilo by to udelat cely obrazkem na pozadit a ten nechat ve stredu?
background-position: center center
Jo slo. Stejne tak by tam slo prsknout tabulku - ale vis jak to je. Rikam si, ze to musi bejt prece jednoduchy a nechci to nijak obchazet. Furt si opakuju, ze je to nejaka jednoducha vec a cim vic na to nemuzu prijit, tim vic me to rozciluje...Citace:
Původně odeslal Smitka
Prave ze je to prkotina na to se s ni nechat rozcilovat :-)
Ale chapu ze jde o princip :-)
Tak kazdopadne verikalni centrovani je problem, protoze stranka obycejne konci tam kde konci obsah, css neumi dynamicky pocitat a blokovy elementy neumi primo pozicovat potomkovske bloky.
Jedno z pouzivanejch reseni je pouzit display:table, v nem pak jde vertical-align, jen to samozrejme neumi IE a musi se to resit napsnim stylu, kterej prechroupe jen IE a vlastnosti display:inline-block. Ale to chce dost ccska a dost divu navic.
Pokud ale znas velikost centrovanyho objektu (nebo aspon zhruba a par pixliku te nezabije), tak se to da resit i bez vnorenych divu, jen je potreba nastavit html a body na height 100procent, dat divu relativni pozici top na 50procent a zapornej top-margin na pulku vysky prvku:
http://smitka.org/center.htm
Presne ako pise Smitka :)
Je to sice "skarede", ale funguje to...
Aigor - btw... Ja na takychto veciach tiez stracam najviac casu (a nervov)... A najviac asi vtedy, ked najdem jednoduche a elegantne riesenie, ktore potom nejde v IE... A este viac, ked najdem dobre riesenie, ktore ide vo FF aj IE ... potom zakonite nejde v Opere. Na to mozes vziat jed, ze to tak bude ;D :|
V tomto kode nepotrebujes poznat height (mozes ho odstranit) ale width je nevyhnutny (u inner bloku)...
Kód:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<title>Vertical align</title>
<style type="text/css">
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#outer {
display: table;
height: 100%;
width: 100%;
}
#middle {
position: relative;
display: table-cell;
width: 100%;
vertical-align: middle;
}
#inner {
margin: auto;
width: 500px;
height: 500px;
background-color: red;
}
<!--[if IE ]>
#middle {
top: 50%;
left: 0;
}
#inner {
top: -50%;
position: relative;
}
<![endif]-->
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
blablalbla
</div>
</div>
</div>
</body>
</html>
Ve Webkitu je ten element u horního okraje a kus ho není vidět.Citace:
Původně odeslal Smitka
PiT: tohle řešení ukazuje jak je Opera zabugovaná (v.10 nevím jak starší) :| stačí po načtení měnit velikost okna.
Ktore? Mne ide v Opere 9.61 aj moje aj Smitkovo riesenie...Citace:
Původně odeslal l_iNu$
Ale s tym, aka je zabugovana, plne suhlasim. Nikdy nedokazem pochopit, ako niekto Operu moze propagovat a hovorit, ze je Firefox shit, ked vzdy ked robim nejaky zlozitejsi projekt, to dopada tak, ze to funguje vo FF obvykle hned, po boxovani a trhani si vlasov aj v IE ale rozhodit to potom este aj v Opere je fakt umenie...
To s použitím display: table…, prvotně se to zobrazí dobře když pak změním výšku okna chová se to divně (divně se to umístí, objevuje se tam posuvník).Citace:
Původně odeslal PiT
Firefox to zobrazí tak jak člověk čeká, ale uvnitř bude taky něco shnilého, když z 10 panelů většinu zavřu a FF si dál alokuje 200MB v RAM…Citace:
Původně odeslal PiT
Divne, teraz som nahodil poslednu 9.63 a ide to OK...Citace:
Původně odeslal l_iNu$
To kazdopadne... Je to pomale, zerie to vela pamati a po vypnuti to zvykne ostat visiet (musis to natvrdo zostrelit)...Citace:
Původně odeslal l_iNu$
On ten FF ale nejako divne kesuje a nechava si v pamati aj zatvorene stranky... Niekde kedysi tusim Jezevec pisal o custom nastaveni pamate na 64MB, potom sa FF kroti...
Mohli by konecne spravit nieco pouzitelne... Osobne - nieco na webkite s vizazou/funkcnostou Firefoxu... Alebo Operu na webkite...
screenshotCitace:
Původně odeslal PiT
Ono se to mu dá trochu pomoct, ale stejně je to plný memory leaků, a Firebug tomu ještě přidá.Citace:
Původně odeslal PiT
Když vylepší Chromium bude dobře.Citace:
Původně odeslal PiT
Ja som Ti veril, len ostra verzia je 9.6x, nie 10...Citace:
Původně odeslal l_iNu$
To kazdopadne... Ja od chromium radsej nic neocakavam a chrome mi nevyhovuje...Citace:
Původně odeslal l_iNu$
Tohle je screenshot z 9.63, chová se stejně jako 10, ono stačí tomu oknu změnit šířku a opraví se to.Citace:
Původně odeslal PiT
Aha, tak sa nabuduce vyjadruj presne. VYSKU okna, nie velkost :) ... Ja som to automaticky chytil za pravy dolny roh a posuval vsemozne...
Pak jsem psal výšku, příspěvek zpět, ale hlavně že se to podařilo nasimulovat.Citace:
Původně odeslal PiT
Mas pravdu, koukam na to... Zda se ze webkit ma problem s nastavenim vysky html a body v procentech... To me netesi...Citace:
Původně odeslal l_iNu$