Középre igazítás CSS-el

A CSS-ben a középre igazítás mindig is nehéz feladat volt, mert a böngészők máshogyan értelmezik a CSS tulajdonságokat, ráadásul vertikális középre igazítás nincs a CSS-ben, ám ezt mégis meg lehet oldani…

Tegyünk fel, hogy szeretnénk teljesen az oldal közepére zárni egy 440*400 pixeles divet, amibe később az oldalunk tartalma kerül. Táblázatos módszerrel ez viszonylag egyszerű, egy három cellás táblázat – ez az, amit el kellene kerülni!

Horizontális középre igazítás

IE alatt működik az a megoldás, hogy a body tagnak beállítunk egy

1

text-align: center;

tulajdonságot, és így középre zárva jelenik meg minden… IE-ben. Éppen ezért egy másik megoldás kell: a margók használata.

1
2
3
4
5
6
7
8
9
10
11
12

<!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" lang="hu">
	<head>
		<title>CSS középre igazítás teszt</title>
		<link rel="stylesheet" type="text/css" href="index.css" media="screen" />
	</head>
	<body>
		<div id="container">
			&nbsp;
		</div>
	</body>
</html>

(Továbbiakban ezt a HTML-t fogjuk használni)

És a következő CSS fájllal a div-ünk középen lesz – horizontálisan.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

body
	{
	background: #0000ff;
	color: #ff0000;
	}
 
div#container
	{
	width: 440px;
	height: 400px;
	background: #ff0000;
	color: #0000ff;
	margin: 0 auto 0 auto;
	}

A bal és jobb margóra beállított auto margin – a specifikáció szerint – középre helyezést jelent, így szépen középen van az oldalunk. Itt természetesen a height tulajdonság megadása nem kötelező, csak a példa miatt írtam hozzá.

Amennyiben a lap szélességét nem fix értékekkel szeretnénk megadni, úgy a margókat megadhatjuk %-os formában is:

1
2
3
4

div#container {
margin-left: 10%;
margin-right: 10%;
}

Vertikális középre igazítás

Igen gyakran előkerül, hogy hogyan lehetne középre igazítani valamit CSS-el; a válasz itt is nagyon egyszerű: a felső és alsó margók beállításával. Csakhogy ez a megoldás nem mindig működik, mert egy ismeretlen magasságú (például százalékos méret, vagy bekezdés, ami font-mérettől függő) elemet így nem igazán tudunk középre helyezni.

Szerencsére van erre is megoldás: az abszolút pozícionálás. Ez igazából csak a fentebb mutatott container divek esetében járható megoldás, egyéb elemet nem igazán lehet vele pozícionálni…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

body
	{
	background: #0000ff;
	color: #ff0000;
	}
 
div#container
	{
	width: 440px;
	height: 400px;
	background: #ff0000;
	color: #0000ff;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -200px;
	margin-left: -220px;
	}

Hogyan működik? A position: absolute megadja, hogy a top és left tulajdonságokat a bal felső saroktól nézze ( ez lesz (0;0) pont). Itt megadhatunk százalékosan is elemeket mindkettő tulajdonságra (előbbi az elem bal felső sarkának a (0;0) ponttól számított vertikális, utóbbi a horizontális távolságát adja meg).

Szóval beállítottuk az elemnek, hogy a bal felső sarka pont a középponton legyen. Viszont mi azt szeretnénk, ha a középső pontja lenne középen: ezért beállítunk két negatív margót, a margin-top-nak az elem magasságának felét, a margin-left-nek a szélesség felét.

És a div máris az oldal közepén díszeleg…

Tutorial.hu Szerkesztőség
Tutorial.hu Szerkesztőség

KAPCSOLÓDÓ CIKKEKTÖBB A SZERZŐTŐL

22 HOZZÁSZÓLÁS

  1. Hátt nemtudom, de nekem sehogysem működött a horizontális cucC… és az az érdekes, hogy amikor becopyztam, megnéztem, hogy működik-e, akkor se működött.. AZ EREDETI! -.-‘ szánalmas

  3. Hát ne is szólj! :D :P Mert a horizontálisnál épp, hogy semmi trükk nincs, az csak egy egyszerű css szabály. :) (Illetve kettő, IE-hez és minden máshoz…)
    A vertikális kicsit összetettebb. Abszolút pozícionálással teszel egy pontot a lap közepére, és negatív margókkal az egész doboz méreteinek felével eltolod föl és balra. Egyszerű, hasznos, fix méreteknél kb. mindig ajánlott. (Csak azért írtam le, hogy más ne keveredjen bele…)

  4. Nem magával a kóddal volt bajom, csak csodálkoztam, h mér nem működik… aztán rájöttem, h rossz css-re hivatkoztam, és azért nem volt jó. x)

  5. jó ez a módszer, viszont nekem az nem tetszik benne /fix méret/, hogy ha lekicsinyíti a felhasználó a böngészőt, akkor hiába jön be a görgő, nem tudja megnézni kis ablakmérettel a honlap egész területét, csak nagy méreten.

  6. Én nagyon köszönöm ezt a tutorialt, mert már mindenhogy próbáltam ezt a horizontálisat, de sehogy nem ment, ez meg tényleg működik! :)

  7. Helosztok,nos ez szép és jo,de a következö a problémám,akarok egy css -t ami többek közöt azt kéne h tudja h két verticális képet rakk be,jobb ill ball oldalra a lap szélére…azokon az oldalakon ahova belinkeltem(ezen csikok fölé,ill rá jönének a menü gombok,szoval elégé jo helyen akadtam,el ha valakinek van ötlete…akkor megköszöném:)

  11. Átméretezésnél is müködik. Felugró ablakban. Mindig középen van. Csak a div mérete állandó. Kösz.:)

  12. Szia!
    Még eléggé kezdő vagyok a html be de ha a height auton van akkor hogy tudom megadni a felét

  14. Szeretnék segítséget kérni! Van egy oldal, amit Publisher-rel csináltam, viszont mindig bal oldalt jelenik meg, szeretném CSS-ben középre igazitani az egész oldalt. Lehetséges, vagy az egészet át kell szerkesztenem ???

  15. body {
    text-align: center;
    }

    /*
    a #container-en itt a legkülső div-et kell érteni, amibe belepakolászol minden tartalmat:
    … ide jöhet minden …
    adni kell neki egy megfelelő értékű szélességet és menni fog :)
    */

    #container {
    position: relative;
    margin: 0 auto;
    width: ___px;
    height: auto;
    text-align: left;
    }

  16. upsz, nem használtam a pre-t, tehát:

    1

    ...  ... ide jön a content ...  ...

  17. Kedves asam9. Azért ennyire nem értek a css-hez!

    Az oldal: hxxp://www.vkkisvarda.hu
    Sima html-ben van irva MS Publisherrel.
    Megnyitom a dreamweaver-rel az index file-t, aztán..?? Na az a kódsor kellene(ha csak ennyi kell hozzá), amit ha bemásolok valahová, gondolom az elejére kell, akkor középen lesz, legalább az index oldal. Amit írtál azt próbálgattam, de nem sikerült középre varázsolni.

  18. Johny, vili :)

    ha dw-ben megnyitod az oldalt, akkor válts át fent code nézetbe és írd át ezeket a sorokat:

    1
2
3
4
5
6
7

    <body link="blue" vlink="purple" style="background: #B2B2B2 url(index_elemei/image293.gif) repeat left top; margin:0; text-align:center; "> 
<div id="container" style="position:relative; margin:0 auto; width:1000px; text-align:left;">
 
... minden tartalom ...
 
</div>
</body>

    a width:1000px-et hasraütésszerűen írtam, csekkold le, hogy mekkora szélességet foglalnak el az elemeid és annyira állítsd.

    Majd ha csinálsz még ilyesmit a CSS-t nézegesd meg, tök egyszerű és akkor nem kell body-ba ilyen link, meg vlink-eket írkálni :)

    Ugyanez itt: hxxp://pastebin.com/DUrSZwH9

    hozzászólásokat összevontam (Harder)

  19. Ezzel van egy kis probléma..
    Ha leveszed a böngészőt teljes méretről, és elkezded összehúzni akkor az oldal egy rész el fog tűnni és nem rak oda görgetősávot.

  21. „IE alatt működik az a megoldás, hogy a body tagnak beállítunk egy1 text-align: center;
    tulajdonságot, és így középre zárva jelenik meg minden… IE-ben. Éppen ezért egy másik megoldás kell: a margók használata.”
    Nem tudom,miről beszéltek,hogy csak ie alatt működik,mert nekem az összes ismert böngésző alatt teljesen jól ment(opera,chrome,mozilla,ie).Nemkell túlbonyolítani,lehet használni ezt az egyszerű kódot is! :D

  22. joczo,
    azért komment előtt egy dátumot is nézz és gondold át, hogy esetleg nem a mostani böngészők viselkedése alapján készült egy cikk … :P

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét