Tutorials

CSS-Box zentrieren Tutorial

Einloggen
Benutzername:
Passwort:

Passwort vergessen?
Kostenlos
Anmelden
werde Fan von ntmb.de...
anzeigen
CSS-Box zentrieren


3172 - crackthebugs - 25.10.2008 17:14 Uhr - Version: 1 - - verlinken als BB-Code


Wer gerade anfängt CSS zu lernen, steht vor einem großen Problem, wenn man eine CSS-Box mittig setzen will. Bei HTML verwendet man einfach den <center>-Befehl - bei CSS ist die jedoch etwas komplexer:

1. Zuerst muss man sich im klaren sein, welche Weite die Box haben soll.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 <html>
<head>
<style type="text/css">
body {
background: #000;
}
#main {
position: absolute;
width: 500px;
height: 500px;
background: #fff;
}
</style>
</head>
<body>
    <div id="main">
        Hallo Welt
    </div>
</body>
</html>


Das sieht dann so aus http://ultraupload.de/image/321/e672.html

2. Jetzt wird bestimmt, dass die Box 50% vom linken Rand entfernt sein soll:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 <html>
<head>
<style type="text/css">
body {
background: #000;
}
#main {
position: absolute;
width: 500px;
height: 500px;
left: 50%;
background: #fff;
}
</style>
</head>
<body>
    <div id="main">
        Hallo Welt
    </div>
</body>
</html>


Das sieht dann so aus http://ultraupload.de/image/322/6e45.html

Wie man sieht, ist nun der linke Rand in der Mitte, und nicht die ganze Box. Dies muss ausgeglichen werden mit einem negativen margin-left. Aus diesem Grund war es auch zu Anfang notwendig, zu wissen, welche Weite die CSS-Box hat. Die Weite der Box wird nun durch zwei geteilt, und dem Parameter "margin-left" negativ hinzugefügt. In unserem Fall:

width: 500px = 500px / 2 = 250 px --> negativ ---> -250px;



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 <html>
<head>
<style type="text/css">
body {
background: #000;
}
#main {
position: absolute;
width: 500px;
height: 500px;
left: 50%;
margin-left: -250px;
background: #fff;
}
</style>
</head>
<body>
    <div id="main">
        Hallo Welt
    </div>
</body>
</html>


Das sieht dann so aus: http://ultraupload.de/image/323/6cb4.html

Mitglieder-Kommentare

Es sind leider noch keine Einträge vorhanden!

Nur registrierte Mitglieder könnten einen Kommentar schreiben.

Melde dich doch ganz einfach an, es ist kostenlos. :-)
©2019 ntmb.org Projekt - Impressum - AGB - Banner - Hauptseite - Service Center