Bild horizontal und vertikal mittig ausrichten

Computer: Software & Programmierung HTML & CSS
#1

Ich habe mir eine kleine Fotogallerie gebastelt, welche ein Bild pro Seite anzeigt. Dieses Bild möchte ich horizontal und vertikal mittig ausrichten. Da die Bilder verschiedene Formate besitzen (3:2, 4:3, 1:1) unterscheiden sich auch deren Größen. Genau hier beginnt mein Problem. Mittig ausrichten funktioniert anscheinend nur, wenn die Größe des Bildes angegeben wird.

#mittig {top:50%; left:50%; width:600px; height:400px; margin-left:-300px; margin-top:-200px; position:absolute;}

Gibt es irgendeine Möglichkeit ein Bild zu zentrieren, ohne Angabe der Länge bzw. Breite?

Bild Beschriften
#2

Hallo,

  • welchen Doctype verwendest du?

  • brauchst du eine browserunabhänige Lösung?

  • kannst du den HTML-Code uploaden bitte(FAQ:2606)?

-> http://de.selfhtml.org/navigation/faq.htm#mittig_zen…

Einige Blicke hier in das Archiv und du hättest etwas finden müssen:

-> /t/bild-mittig-anzeigen/2800456

Grüße Roman

#3

Hier ein Beispielcode:

#mittig {top:50%; left:50%; width:600px; height:400px; margin-top:-200px; margin-left:-300px; position:absolute; z-index:1}

Das Bild soll quasi in einer neuen Ebene horizontal und vertikal zentriert werden. „Leider“ kommen meine Bilder aus einer Datenbank und sind nicht immer 600x400 Pixel groß. Mittlerweile glaube ich zu wissen, das eine vertikale Zentrierung ohne Pixelangabe nicht möglich ist.

#4

vertikal zentrieren
Hallo,

-> http://www.webdesign-in.de/mts/vertikal-und-horizont…
( bitte auch die Kommentare lesen! )

-> http://www.wssexpert.de/Style/Examples/007/center.html

-> http://www.webkrauts.de/2010/12/04/zentrieren-ohne-z…
( fand ich so ganz nett… :wink: )

  • Warum verwendest du HTML 5, welche Browser verwendest du?

Grüße Roman

#5

Moin,

#mittig {top:50%; left:50%; width:600px; height:400px;
margin-left:-300px; margin-top:-200px; position:absolute;}

Wenn der Viewport des Browsers kleiner als 600px in der Breite oder kleiner als 400px in der Höhe ist (was bei Netbooks durchaus wahrscheinlich ist), dann sieht man das Bild nicht vollständig und hat auch gar keine Chance, es vollständig zu sehen.

Wenn dann der „Schließen“-Button sich noch am oberen oder linken Rand befindet, dann kann man das Bild nichtmal mehr schließen. Bei Payback ist das an einer Stelle so der Fall, als Antwort vom Kundendienst gibts dann „Überprüfen Sie die Einstellungen Ihres Browsers“.

Haha.

-Efchen

P.S.: Hier ist die Lösung: http://d-graff.de/fricca/center.html