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…

Kapcsolódó bejegyzések:
  • Alapvetően 2 módja van a CSS alapú lapok tartalmának középre igazításához attól függően, hogy a lap rugalmas vagy fix szélességű.Rugalmas lapszélességEz …

  • Color: az adott elem színét adhatjuk meg vele. Pl.H1 { color: blue } H2 { color: #0000ff } H3 { color: #0c0 }Background Color: az adott elem háttérsz …

  • CSS alapú legördülő horizontális menü készítését sajátíthatod el a leírás segítségével.Stílus:body { padding: 0px; margin: 0px; behavior: ur …

  • A honlap elemeinek pozícionálása megoldható többféleképpen is. Az egyik módszer a táblázatos, ezt használják a leggyakrabban de nem azért meg jobb, hanem mert ez …

  • Célunk, hogy három fix szélességű oszlopból álló weboldalt készítsünk, ahol a tartalmat CSS stíluslapokkal formázzuk. A webtartalom megformázásához “sima” float- …

A cikket beküldte: BlackY ()

22 hozzászólás

  1. guba says:

    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

  2. guba says:

    ááá loool bocs… én voltam hülye :/// nem szóltam :P

  3. zoleytaylor says:

    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. guba says:

    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. asam9 says:

    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. Johi says:

    É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. RENEGAÐE says:

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

  8. maurice says:

    Köszönöm a segítséget! Nekem sikerült használni.

    Köszönöm!

  9. Dacsy says:

    Ezmost jóljött! Hálás köszönet!

  10. macko30 says:

    Nekem müködött. A “container” helyére természetesen a div id-je.

  11. macko30 says:

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

  12. mateeee says:

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

  13. gabesz says:

    uhh thx ez most nagy segítség volt pont ezt kerestem ;)

  14. Johny says:

    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. asam9 says:

    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. asam9 says:

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

    1
    
    ...  ... ide jön a content ...  ...
  17. Johny says:

    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. asam9 says:

    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. tdna says:

    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.

  20. Remek! :) a horizontális nagy segítség volt, a másikra most nincs szükségem, de megjegyzem!;) Még egyszer köszönöm!

  21. joczo says:

    “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. Harder says:

    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

Szólj hozzá
a Középre igazítás CSS-el c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>