CSS- Unterelement in zentrierten Element positionieren
-
Ich habe eine Seite, deren gesamte Inhalte komplett zentriert dargestellt werden sollen. Nun möchte ich relativ dazu ein Element mit CSS positionieren.
Wenn ich es wie folgt mache wird das Bild aber leider nicht relativ zum übergeordneten Element ausgerichtet. Wenn ich position:relativ benutze wird das Element an der falschen Stelle angezeigt. Irgendwo habe ich gelesen, dass das postition:absolute nur relativ arbeitet, wenn das übergeordnete Element nicht die Standardformatierung (static) hat. Bloß wenn ich das für das übergeordnete Element ändere (z.b. in absolut) wie bekomme ich es dann zentriert?<div algin="center">
<!-- Hier ist ein Element gewünscht, was relativ zum div ausgerichtet wird -->
<img style="position:absolute; top:0px; left:0px; z-index:1;" src="einbild.jpg"><!-- Weiterer Seiteninhalt -->
</div>
Falls das etwas unverständlich war: Mein Ziel ist also ein Element innerhalb eines zentirerten divs absolut zu positionieren.
-
<div style="position:relative; text-align:center; display:block;">
-
Vielen Dank für die schnelle Antwort. Die Zentrierung so funktioniert zwar im IE, aber im FF anscheinend nicht. Im IE wird dann auch das image nicht an position x=0, y=0 innerhalb des zentrierten bereichs dargestellt sondern irgendwo in der Mitte :(.
-
Ich habe bei Selfhtml gelesen, dass man mit left-margin:auto; anstatt mit align="center" zentrieren sollte. Das scheint aber so nicht zu funktionieren...sieht jmd. den Fehler?
<html> <head></head> <body> <!-- anstatt position:absolute habe ich hier auch schon relativ usw. probiert -> wird nicht zentriert --> <div style="position:absolute; margin-left:auto; margin-right:auto;"> <img style="position:absolute; top:0px; left:0px; z-index:1;" src="http://www.google.de/intl/de_de/images/logo.gif"> <table style="background:blue; color:black; width:600px; height:600"> <tr> <td> cell1</td> <td>cell2</td> </tr> </table> </div> </body> </html>
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <title>Test</title> </head> <body> <div style="text-align: center;"> <p>...Zentrierter Text...</p> <img alt="" src="http://www.google.de/intl/de_de/images/logo.gif" style="margin-left: 80px;"/> <!-- Bild wird um 80px nach rechts verschoben. --> </div> </body> </html>
@flenders: DIVs sind bereits Block-Elemente, somit ist "display: block;" überflüssig.
@jca:
Solange dein DIV keine vorgegebene Breite hat (width: ...), wird margin: auto; auch nichts bringen.
Wenn du wirklich richtig mit CSS(2) arbeiten möchtest, musst du dich an einen XHTML-Standard gewöhnen und darst nicht 08/15-Code schreiben, nur weil der IE relativ resistent gegen unsauberen Code ist.