[CSS, HTML] Centrování

**Aigor** · 24.01.2009, 16:59

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!

**l_iNu$** · 24.01.2009, 17:15

Dá se to udělat nějak takto:

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>

Nevýhoda že je potřeba dopředu znát velikost, k vidění.

**Aigor** · 24.01.2009, 17:29

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+

**Keymaster** · 24.01.2009, 17:47

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;

**l_iNu$** · 24.01.2009, 18:07

Původně odeslal Keymaster

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.

**Keymaster** · 24.01.2009, 18:22

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.

**Aigor** · 24.01.2009, 21:20

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.

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

**Smitka** · 24.01.2009, 22:24

A nestacilo by to udelat cely obrazkem na pozadit a ten nechat ve stredu?
background-position: center center

**Aigor** · 24.01.2009, 23:29

Původně odeslal Smitka

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

**Smitka** · 25.01.2009, 08:45

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

**PiT** · 25.01.2009, 11:00

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

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>

**l_iNu$** · 25.01.2009, 11:27

Původně odeslal Smitka

http://smitka.org/center.htm

Ve Webkitu je ten element u horního okraje a kus ho není vidět.

PiT: tohle řešení ukazuje jak je Opera zabugovaná (v.10 nevím jak starší)

stačí po načtení měnit velikost okna.

**PiT** · 25.01.2009, 11:33

Původně odeslal l_iNu$

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

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

**l_iNu$** · 25.01.2009, 12:00

Původně odeslal PiT

Ktore? Mne ide v Opere 9.61 aj moje aj Smitkovo riesenie...

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

Původně odeslal PiT

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

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…

**PiT** · 25.01.2009, 12:06

Původně odeslal l_iNu$

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

Divne, teraz som nahodil poslednu 9.63 a ide to OK...

Původně odeslal l_iNu$

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…

To kazdopadne... Je to pomale, zerie to vela pamati a po vypnuti to zvykne ostat visiet (musis to natvrdo zostrelit)...

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

**l_iNu$** · 25.01.2009, 12:39

Původně odeslal PiT

Divne, teraz som nahodil poslednu 9.63 a ide to OK...

screenshot

Původně odeslal PiT

To kazdopadne... Je to pomale, zerie to vela pamati a po vypnuti to zvykne ostat visiet (musis to natvrdo zostrelit)...

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

Ono se to mu dá trochu pomoct, ale stejně je to plný memory leaků, a Firebug tomu ještě přidá.

Původně odeslal PiT

Mohli by konecne spravit nieco pouzitelne... Osobne - nieco na webkite s vizazou/funkcnostou Firefoxu... Alebo Operu na webkite...

Když vylepší Chromium bude dobře.

**PiT** · 25.01.2009, 12:52

Původně odeslal l_iNu$

screenshot

Ja som Ti veril, len ostra verzia je 9.6x, nie 10...

Původně odeslal l_iNu$

Ono se to mu dá trochu pomoct, ale stejně je to plný memory leaků, a Firebug tomu ještě přidá.

Když vylepší Chromium bude dobře.

To kazdopadne... Ja od chromium radsej nic neocakavam a chrome mi nevyhovuje...

**l_iNu$** · 25.01.2009, 12:57

Původně odeslal PiT

Ja som Ti veril, len ostra verzia je 9.6x, nie 10...

Tohle je screenshot z 9.63, chová se stejně jako 10, ono stačí tomu oknu změnit šířku a opraví se to.

**PiT** · 25.01.2009, 13:02

Aha, tak sa nabuduce vyjadruj presne. VYSKU okna, nie velkost

... Ja som to automaticky chytil za pravy dolny roh a posuval vsemozne...

**l_iNu$** · 25.01.2009, 13:09

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.

**Smitka** · 26.01.2009, 08:53

Původně odeslal l_iNu$

Ve Webkitu je ten element u horního okraje a kus ho není vidět.

Mas pravdu, koukam na to... Zda se ze webkit ma problem s nastavenim vysky html a body v procentech... To me netesi...

Téma: [CSS, HTML] Centrování

Nástroje témat

Zobrazení

[CSS, HTML] Centrování

Re: [CSS, HTML] Centrování

Re: [CSS, HTML] Centrování

Re: [CSS, HTML] Centrování

Re: [CSS, HTML] Centrování

Re: [CSS, HTML] Centrování

Re: [CSS, HTML] Centrování

Re: [CSS, HTML] Centrování

Re: [CSS, HTML] Centrování

Re: [CSS, HTML] Centrování

Re: [CSS, HTML] Centrování

Re: [CSS, HTML] Centrování

Re: [CSS, HTML] Centrování

Re: [CSS, HTML] Centrování

Re: [CSS, HTML] Centrování

Re: [CSS, HTML] Centrování

Re: [CSS, HTML] Centrování

Re: [CSS, HTML] Centrování

Re: [CSS, HTML] Centrování

Re: [CSS, HTML] Centrování

Re: [CSS, HTML] Centrování

Informace o tématu

Users Browsing this Thread

Podobná témata

[CSS and Opera <9] Problem s pozicovanim

[CSS, XHTML] DIV namiesto TABLE ?

[CSS, HTML] Jak spravit stranku?

[PHP, HTML] Jak udelat odkaz ???

[PHP & HTML] čínština

Klíčová slova k tématu

Pravidla přispívání