Šta je novo?

Centriranje DIV u DIV preko CSS-a

  • Začetnik teme Začetnik teme dj13
  • Datum pokretanja Datum pokretanja

dj13

Čuven
Učlanjen(a)
30.01.2002
Poruke
1,112
Poena
715
Mozda nekome zatreba. Zasto preko CSS-a kad je najednostavnije ubaciti align="center"? Recimo u danasnje vreme CMS-ova cesto je pozeljnije i lakse uticati na dizajn preko CSS-a nego ceprkati po mnogim fajlovima.
A resenje koje se najcesce mozes naci na netu je ono sa:
margin:0 auto;
gde je potrebno da unutrasnji DIV ima iskazanu sirinu (npr. width: 600px😉.
Sta ako je u pitanju neki fluidni dizajni i ne zelimo da ogranicavamo sirine, onda gornji primer nije upotrebljiv. Istrazujuci po netu dosao sam do resenja koje bi trebalo da radi OK u svim aktuelnim browserima. Ne znam da li postoji neko jos bolje resenje i da li ovo resenje pravi neke probleme. Na nekoliko upotrebljenih mesta sve radi OK.

Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Centriranje DIV</title>
<style type="text/css">
<!--
#spolja {
	float: left;
	left: 50%;
	position: relative;
}
#unutra {
	position:relative;
	left:-50%;
}
-->
</style>
</head>
<body>
<div id="spolja">
  <div id="unutra"><------------------ Centrirani div ------------------></div>
</div>
</body>
</html>
 
Ako ne želiš fiksnu širinu, onda nemaš šta da se lomiš sa floatovima i %, dovoljno je margin: 0 auto; i uvek će biti centrirano.
 
Poslednja izmena:
Kod:
<!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">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Test code</title>
	</head>
	<body>
		<div style="margin: 0 auto; text-align: center;">Sadržaj.</div>
	</body>
</html>

^basic

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test code</title>
</head>
<body>
<div style="margin: 0 auto; text-align: center;">
<div style="width: 400px; height: 300px; background: #FFFFCC; color: #660000; border: 1px solid #996600;">Sadržaj.</div>
</div>
</body>
</html>
^advanced
 
Poslednja izmena:
Kod:
<!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">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Test code</title>
	</head>
	<body>
		<div style="margin: 0 auto; text-align: center;">Sadržaj.</div>
	</body>
</html>

^basic

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test code</title>
</head>
<body>
<div style="margin: 0 auto; text-align: center;">
<div style="width: 400px; height: 300px; background: #FFFFCC; color: #660000; border: 1px solid #996600;">Sadržaj.</div>
</div>
</body>
</html>
^advanced
Da ali ne.
Kao prvo tvrdio si da samo treba margin: 0 auto; sto si i sam opovrgao u primerima da nije samo to.
Drugi primer otpada jel ima fiksnu sirinu.
Trece u mom primeru kao sto sam i naveo centriranje DIV u DIV bez ikakvih drugih interakcija. Tvoj prvi primer sa text-align radi ali pravi dodatni problem jer centriranje utice na decu, a recimo u deci hoces sve da bude levo.
A sta ako u deci DIV hoces da imas text align left ili right? Da li si proverio gde je onda centar ?

poz
 
Poslednja izmena:
😀 Dovoljan je samo margin: 0 auto;, stavio sam text-align: center; čisto da bi tekst bio na sredini, a ne da zavisi od browsera. Čime sam samo malo customizovao stvar, ne i poništio njegov efekat, odnosno ono što treba postići.

Drugi primer je samo pokazatelj kako se fixna širina može pozicionirati na isti način.

Na kakve interakcije misliš?

Prosto podesiš deci da sve bude levo. Ja ne volim da mi browseri pomažu u određivanju sadržaja, sve je u pixel tačno.

Sve se to podesi... Ovo je samo primer kako se divovi mogu slagati. Nisam rekao da je tvoj primer loš, ali postoje i drugi. To si pitao zar ne?
 
😀 Dovoljan je samo margin: 0 auto;, stavio sam text-align: center; čisto da bi tekst bio na sredini, a ne da zavisi od browsera. Čime sam samo malo customizovao stvar, ne i poništio njegov efekat, odnosno ono što treba postići.

Drugi primer je samo pokazatelj kako se fixna širina može pozicionirati na isti način.

Na kakve interakcije misliš?

Prosto podesiš deci da sve bude levo. Ja ne volim da mi browseri pomažu u određivanju sadržaja, sve je u pixel tačno.

Sve se to podesi... Ovo je samo primer kako se divovi mogu slagati. Nisam rekao da je tvoj primer loš, ali postoje i drugi. To si pitao zar ne?

Ja nisam napisao sta volim ili ne, i da li mi je pixel preciznost bitna ili ne, i da li dopustam da mi browseri uticu na zivot 🙂. Naveo sam primer koji RADI (centrioranje DIV u DIV bez width), koji nisam ja izmislio nego pronasao negde na netu i malo uprostio. Ince 99,99% primera na netu za centriranje DIV su bazirani na tvom drugom primeru.

Ja sad kazem da je tvoj drugi primer promasio temu zbog WIDTH, a prvi primer ti je los. Zasto los i na koje interakcije mislim evo primera:

Kod:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test code</title>
</head>
<body>
<div style="margin: 0 auto; text-align: center;">Sadržaj.
  <div style="margin: 0 auto; text-align: left;">Da li je ovaj DIV centriran?<br />
    Govorim o centriranju DIV i slobodnom odabiru text align unutar njega.</div>
</div>
</body>
</html>
 
Ako pričamo o primeru koji dovodi do pozicioniranja DIVa (a ne sadržaja u DIVu) onda su tvoji komentari malo zalutali.

Naveo si primer koji radi centriranje <div> taga unutar drugog <div> taga koji je jedan način radi pozicionira DIV. Taj primer je upotrebljiv do određene mere, zbog njegovog floatovanja, gde moraš da paziš i nišaniš da li će on biti preko nekog sadržaja, kako će se ponašati u Exporeru, da li će možda biti potisnut od nečega, kako će se sadržaj ispod njega ponašati.

Ono što sam ja napisao je centriranje <div> glavobolja free. Ne znam zašto si se uhvatio dodatnih selektora koje sam napisao kao da sam ti ne znam šta učinio. Ti si koristio float, left i position, dok sam ja samo margin i text-align, gde text-align i ne mora da bude pozvan, ako želiš sadržaj da držiš levo.

Prosto to je način koji ja koristim i dao sam dodatni primer sa fixnom širinom u vezi sa pominjanjem fixne širine.

Prvi primer je sasvim dobar i funkcionalan, a kao što sam kažeš ako ga koristi 99.99% web dev zajednice, tako da ja nemam šta drugo da dodam kao argument da li je primer dobar ili loš.

Inače, <div> tag je uvek centiran sa margin: 0 auto;, a ti govoriš o sadržaju koji se nalazi u njemu. Gde je u tvom primeru obavezno da stoji u sredini (jer nema gde drugde da ide), dok sam ja pružio opciju sa menjanjem pozicije.

U primeru koji pokušavaš da osporiš, sadržaj iz drugog diva si pozicionirao levo, tako da si pozicirao div (centralno) i sadržaj složio levo. Drugim rečima imaš centriranje taga i slobodan odabir text-aligna, što nemaš u tvom primeru.

Trudim se, ali ne vidim gde je problem. Možda nešto ne uviđam pravilno.
 
Ako pričamo o primeru koji dovodi do pozicioniranja DIVa (a ne sadržaja u DIVu) onda su tvoji komentari malo zalutali.
Moj primer pozicinora dete DIV u sredini ma sta da se desava sa sadrzajem unutar njega. Ili ja ne znam sta je centar. Ili ako mozes da mi objasnis tvoje primere sta predstavljaju: centriranje diva ili centriranje sadrzaja ili oba? Mozda je bitnije kako se to zove nego rezultat?
Naveo si primer koji radi centriranje <div> taga unutar drugog <div> taga koji je jedan način radi pozicionira DIV. Taj primer je upotrebljiv do određene mere, zbog njegovog floatovanja, gde moraš da paziš i nišaniš da li će on biti preko nekog sadržaja, kako će se ponašati u Exporeru, da li će možda biti potisnut od nečega, kako će se sadržaj ispod njega ponašati.
Da zato sam i napomenuo primer za koriscnjeu u CMS-ovima gde najcesce ima barem 1 ako ne i vise wrapper i box divova oko sadrzaja. Ni jednom nisam rekao da je primer idealan.
Prvi primer je sasvim dobar i funkcionalan, a kao što sam kažeš ako ga koristi 99.99% web dev zajednice, tako da ja nemam šta drugo da dodam kao argument da li je primer dobar ili loš.
Prvi primer ne koristi 99,99% nego drugi sa fixnom WIDTH. Dobar je primer ali ne ispunjava osnovni uslov (ponavljam se; bez WIDTH). Tom logikom si mogao dati primer nekog dobrog coda iz PHP ili JS - dobar i funkcionalan ali ne i u ovom slucaju.
A kad smo vec kod tih 99,99% na dato resenje su cesto negodovali bas zbog WIDTH.
Inače, <div> tag je uvek centiran sa margin: 0 auto;, a ti govoriš o sadržaju koji se nalazi u njemu. Gde je u tvom primeru obavezno da stoji u sredini (jer nema gde drugde da ide), dok sam ja pružio opciju sa menjanjem pozicije.
Ovo mi uopste nije jasno. Mozda sam onda trebao da napisem centriranje koje ne moze da bude ne centriranje?
U primeru koji pokušavaš da osporiš, sadržaj iz drugog diva si pozicionirao levo, tako da si pozicirao div (centralno) i sadržaj složio levo. Drugim rečima imaš centriranje taga i slobodan odabir text-aligna, što nemaš u tvom primeru.
Nemam centriranje taga?Kako nemam slobodan odabir text align??? Ko mi brani? Da li si probao primer? Ja bas i hocu da pozicioniram text levo ili desno a da ne bezi iz sredine nego da bude slozen a ostane maximalno u sredini.
Posto jedna slika vise vredi od hiljadu reci:

Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Centriranje DIV</title>
<style type="text/css">
<!--
#spolja {
	float: left;
	left: 50%;
	position: relative;
}
#unutra {
	position:relative;
	left:-50%;
}
-->
</style>
</head>
<body>
<div id="spolja">
  <div id="unutra"><------------------ Centrirani div ------------------>
    <div id="dete1" style="text-align:left"><strong>Minimum System Requirements: </strong><br />
      • 233 MHz Intel Pentium class or better processor<br />
      • At least 128 MB of RAM<br />
      • Windows XP Service Pack 3 or later<br />
      • Vista Service Pack 2 or later
      <div id="dete1a" style="text-align:right;"><strong>Minimum System Requirements: </strong><br />
        • 233 MHz Intel Pentium class or better processor<br />
        • At least 128 MB of RAM<br />
        • Windows XP Service Pack 3 or later<br />
        • Vista Service Pack 2 or later</div>
    </div>
    <div id="dete2" style="text-align:center"><strong>Minimum System Requirements: </strong><br />
      • 233 MHz Intel Pentium class or better processor<br />
      • At least 128 MB of RAM<br />
      • Windows XP Service Pack 3 or later<br />
      • Vista Service Pack 2 or later</div>
  </div>
</div>
</body>
</html>
 
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Centriranje DIV</title>
<style type="text/css">
<!--
#spolja {
	float: left;
	left: 50%;
	position: relative;
	height: 120px;
	background-color: #999999;
	background-image: url(_r1_c1.jpg);
}
#unutra {
	position:relative;
	left:-50%;
	background-color: #cccccc;
}
-->
</style>
</head>
<body>
<div id="spolja">
Lorem ipsum
  <div id="unutra"><------------------ Centrirani div ------------------></div>
</div>
</body>
</html>

Pogledaj kako izgleda tvoj primer, bice ok samo ako koristis belu kao bgd color za wrapper, ne koristis border niti bgd image. Ako tebi ovo koristi, onda je u redu, zavisi od situacije, meni je margin; 0 auto ipak bolje resenje.
 
Poslednja izmena:
Prvi primer ne koristi 99,99% nego drugi sa fixnom WIDTH. Dobar je primer ali ne ispunjava osnovni uslov (ponavljam se; bez WIDTH).
Eksplicitno navođenje širine (bilo relativne ili apsolutne) je čak i jedan od preduslova za kreiranje cross-browser kompatibilnog koda jer recimo u Internet Explorer browserima (mislim na sve verzije) aktivira tzv. hasLayout atribut elemenata u DOM stablu čime efektivno ti elementi mogu da se koriste za "sklapanje" izgleda stranice. Neki prvi koraci u eliminisanju tog problema kod web dizajnera bili su korišćenje Microsoftovog vlasničkog atributa zoom sa vrednoću 1 (zoom:1) ali s obzirom da on nije sastavni deo W3C XHTML specifikacija mnogo bolja alternativa je eksplicitno zadavanje nekog od atributa koji zadaje dimenzije elementu, najčešće širine.

Više o ovoj problemativi na recimo sledećoj adresi: http://reference.sitepoint.com/css/haslayout


Što se tiče centriranja sadržaja takođe najčešće koristim automatske margine u odnosu na najbliži pozicioniran roditeljski element (obično div kontejner). U nekim specifičnijim situacijama pristup apsolutno pozicioniranog unutrašnjeg elementa u odnosu na relativno pozicionirani spoljašnji je alternativa.
 
Nazad
Vrh Dno