[CSS, HTML] Centrování

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

**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í

Hybrid View

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í