1 of 1

Középre rendezés

Vízszintes középre rendezés külső margóval.

A következő technikával blokkos megjelenítésű elemeket lehet a szülő elemükben középre rendezni. A vízszintes középre rendezéshez auto értéket kell beállítani a jobb és bal oldali margin (külső margó) tulajdonságnak.

div {
    margin-left: auto;
    margin-right: auto;
}

Az elem szélességét is szükséges megadni, ez lehet relatív szélesség (százalék, vagy viewport), vagy fix érték például pixel (ha nincs megadva szélesség az elem teljesen kitölti a szülő elemet).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Center block element</title>
    <link rel="stylesheet" href="center.css">
</head>
<body>
    <main>
        <div></div>
    </main>
</body>
</html>

main {
	padding: 30px 0;
	background-color: #ffec99;
}

div {
	margin-left: auto;
	margin-right: auto;
	
	width: 200px;
	height: 200px;
	background-color: #f03e3e;
}

Ez a technika csak blokkos elemekkel működik, display: inline (szövegközi) elemekre hatástalan (nincs külső margójuk).

A technika úsztatott elemek esetében nem működik.

Középre rendezés

Vízszintes középre rendezés külső margóval.

div {
    margin-left: auto;
    margin-right: auto;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Center block element</title>
    <link rel="stylesheet" href="center.css">
</head>
<body>
    <main>
        <div></div>
    </main>
</body>
</html>

main {
	padding: 30px 0;
	background-color: #ffec99;
}

div {
	margin-left: auto;
	margin-right: auto;
	
	width: 200px;
	height: 200px;
	background-color: #f03e3e;
}

Ez a technika csak blokkos elemekkel működik, display: inline (szövegközi) elemekre hatástalan (nincs külső margójuk).

A technika úsztatott elemek esetében nem működik.