Div horizontális és vertikális középre igazítása

Div horizontális középre igazítása

Horizontális középre igazítás csak akkor lehetséges, ha megadjuk az elem szélességét. Ezt általában akkor használjuk, ha az egész weboldalt szeretnénk középre igazítani.

[html]
<div id="wrap">
Lorem ipsum dolor sit amet, consectetur adipisicing elit…
</div>
[/html]

[css]
#wrap {
width: 700px;
margin: 0 auto;
}
[/css]

Div horizontális és vertikális középre igazítása

Ennél a módszernél a szélesség mellett az elem magasságát is meg kell adnunk.

[html]
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit…
</div>
[/html]

[css]
#content {
position: absolute;
width: 500px;
height: 400px;
top: 50%;
left: 50%;
margin-left: -250px; /* mindig a szélesség felét kell megadni */
margin-top: -200px; /* mindig a magasság felét kell megadni */
}
[/css]

Címkék, , ,

Kategorizálva: ,

A cikket írta:stilldesign

1 hozzászólás

  • Ati says:

    Ezzel a megoldással csak az a baj, ha valaki megnézi mobil eszközön, kisebb felbontásban, akkor a margó értékével simán ki tud csúszni a tartalom és nem görgethető.
    Szóval az így beigazított div tartalma a div méreténél kisebb felbontás esetén nem lesz rendesen látható/olvasható.