Bild vertikal und horizontal zentrieren

Lena83 · 16.03.2008, 15:20

Ich möchte auf der Startseite ein Bild anbringen. Dieses Bild sollte vertikal und horizontal zentriert werden.
Wie mache ich das am besten?
Danke schonmal für eure Tipps

webcreate · 16.03.2008, 15:30

HTML-Code:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <title>Testfile DIV v/h zentriert</title>
 <style>
 html
 {
     background-color: #FFFFFF;
     margin: 0px;
     padding: 0px;
 }
 
 body
 {
     margin: 0px;
     padding: 0px;
 }
 
 .box
 {
     border: thin solid #000000;
     background-color: #CCCCCC;
     position: absolute;
     top: 50%;
     left: 50%;
     margin-top: -150px;
     margin-left: -150px;
     height: 300px;
     width: 300px;
     overflow: auto;
 }
 
 .inhalt
 {
     width: 100%;
     margin: auto;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 12px;
     color: #000000;
     text-align: center;
 }
 </style>
 </head>
 <body> 
 <div class="box">
 <div class="inhalt">
 Das ist nun der Inhalt des DIVs
 </div>
 </div>
 </body>

Lena83 · 16.03.2008, 20:02

Recht herzlichen dank für den Code. Genauso etwas habe ich gemeint. Nochmals vielen Dank

Lena83 · 18.03.2008, 09:56

Eine Frage dazu hätte ich noch:
funktioniert dieses Skript in den derzeit aktuellen Browsern oder gibt es Ausnahmen, bei denen das nicht funktioniert ?

webcreate · 18.03.2008, 10:29

Getestet und für gut befunden in
IE 5.5, 6 und 7
Netscape 7
Opera 9
FF 2

Lena83 · 18.03.2008, 20:42

Alles klar!
Nochmals vielen Dank für deine Hilfe