• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bild horizontal und vertikal zentrieren

G

general_xxx

Guest
Hallo,

eine oft gefragte Frage, auf dich ich aber bis jetzt noch keine eindeutige und xhtml 1.0 valide Lösung gefunden habe:

Wie kann ich ein Bild in einem Div horizontal und vertikal zentrieren, wenn ich weder die Breite noch die Höhe des Bildes kenne, bzw. diese sich von Fall zu Fall verändern?

Lg
Marek
 
Mit aktuellen Browsern läuft folgende methode:

html:

Code: 
<div id="box">
   <img src="deinbild.jpg" width="XXX" height="XXX" alt="deine bildbeschreibung" />
</div>
css:

Code: 
div#box{
display:table-cell;
text-align:center;
vertical-align:middle;
height:xxx;
width:xxx;
}

img{
deine formatierung
rahmen, etc...
hat nichts mim zentrieren zu tun
}
Der trick ist folgender. durch display:table-cell machen wir die divbox zu einer tabellenzelle. deren inhalt lässt sich mit vertical-align:middle; vertikal zentrieren. Da bilder von grundauf inline elemente sind, lassen sie sich durch text-align:center horizontal zentrieren.
Diese eigenschaft muss aber auch der divbox gegeben werden, da somit der komplette inhalt in der box zentriert wird.
Ich hoffe das ist verständlich und beantwortet deine frage ;-)

grüße hokage
 
Mit aktuellen Browsern?
css4you sagt bei der Anzeigeart table-cell was anderes. Das wird vom IE nämlich überhaupt nicht unterstützt!

Ne Lösung mit validem HTML/xHTML weiß ich auch nicht.
Horizontal zentrieren schaffst du denke ich selber mit margin: 0; und ner definierten Breite.
Fürs vertikale zentrieren musst du alle Tags mit height="100%" versehen. Sprich <head> <body> usw. bis dann das Bild kommt. dann sollte es auch bei definierter Höhe und margin:0; funktionieren.
 
Gibt auch noch die position:absolute;-Variante. Dabei muss man für top und left jeweils 50% setzen und als margin-top bzw. margin-left den negativen Wert der Breite des zu zentrierenden Objektes.
 
Naja die Methode war mir auch schon bekannt, aber leider kann ich nicht immer sagen wie breit das Bild ist und es ändert sich auch mit der Zeit.

Das ganze soll auch ein automatisches System sein.. da fällt mir denn nur die Möglichkeit ein die Breite des Bildes mit php auszulesen und dann zu übergeben. Finde ich aber leider 1. ein bisschen aufwändig und 2. kann ich denn mein Css nicht 100%ig auslagern, was ich aber gerne machen würde...

Kennt den jemand von euch noch irgendwelche Tricks?

Ich verstehe auch nicht was so schwer daran sein sollte das durchzusetzen.. ich hoffe es kommt in Zukunft mal ne bessere variante und Html geht mir teilweise echt auf den Senkel... Ob es nun verschiedene Darstellungsformen in den verschiedenen Browsern sind oder die Behinderung, dass manche Sachen ohne große Tricks nicht möglich sind.

Der Browser kann Divs einer bestimmten Göße doch auch perfekt anzeigen, denn könnte er genausogut auch die Mitte berechnen und das Bild dort plazieren.

Bin ich der einzige der denket, dass Html mal generell überholt und überdacht werden müsste? Vielleicht ein paar neue Strukturen oder ähnliches....
 
Zuletzt bearbeitet von einem Moderator:
SimonRue schrieb:
Mit aktuellen Browsern?
css4you sagt bei der Anzeigeart table-cell was anderes. Das wird vom IE nämlich überhaupt nicht unterstützt!

Ne Lösung mit validem HTML/xHTML weiß ich auch nicht.
Horizontal zentrieren schaffst du denke ich selber mit margin: 0; und ner definierten Breite.
Fürs vertikale zentrieren musst du alle Tags mit height="100%" versehen. Sprich <head> <body> usw. bis dann das Bild kommt. dann sollte es auch bei definierter Höhe und margin:0; funktionieren.
Zum Vergrößern anklicken....

Erstens, ist der Internetexplorer der gröte Drecksbrowser (vor allem der IE7), und zweitens wird bei css4you nochnichteinmal die kompatiblität mit dem IE8 angezeigt.
Da kann man dann selber ausprobieren, ob es dort läuft oder nicht.

Zum code: Meine vorgeschlagene Lösung beruht auf sauberem code, modernem CSS und ist durchweg valide. Was dagegen spricht (außer das IE7 Problem) weiß ich gerade nicht so wirklich.
Irgendwelche absolute positionierungen, die dann auch noch negative margin werte zur hilfe nehmen, würde ich da auf jeden fall nicht verwenden.
Das hat nähmlich deutlich mehr nachteile^^
1. Der code ist unsauber.
2. Verkleinere bei dieser Methode doch mal das Browserfenster und schaue was passiert^^

Naja, aber warum rechtfertige ich mich überhaupt^^
Mach halt was für dich die beste lösung ist...

grüße hokage
 
Hey hokage555,

also deine Lösung ist schon sehr gut und ich werde die wahrscheinlich auch erstmal benutzen. Nur wäre es natürlich auch gut, wenn Sie außer valide auch von jedem modernerem Browser richtichtig darstellbar wäre.

Natürlich ist der IE ein bisschen "komisch" und irgendwie zieht sich das von Vista über Windows Mobile bis zum IE wie ein roter Faden durch, aber durch die leider immernoch große Verbreitung des IE wird man gezwunden damit klar zu kommen.

Naja bleibt nur zu hoffen dass die Zukunft besseres bringt.... windows7, WinMobile 7 und evtl taugt ja auch der IE9 mal was... irgendwann muss man als großer Softwarehersteller doch mal die Kurve kriegen ^^

Gibt es in HTML 5 Anzeichen zur Besserung dieses Problems?
 
vertival-align kann auch auf display: inline-block angewendet werden.
display: inline-block kennt der ff aber erst ab vers.3.
Du könntest für alle nicht-IEs eine solide css-Tabelle aufbauen und für IE5.5-7 inline-block-boxen verwenden:
HTML: 
<div id="table">
<div id="table-row">
<div id="table-cell">
<img src="http://s2.bmedien.eu/images/htmlde_skin_2.0_reloaded/logo.gif"  />
</div>
</div>
</div>
Die css-Tabelle:
Code: 
 *  {
     padding:0;
     margin:0;
}

#table {
display: table;
margin: 0 auto;
}

#table-cell {
display: table-cell;
height: 500px;
width: 500px;
vertical-align: middle;
text-align: center;
background-color: gray;
}

#table-row {
display: table-row;
}

Für den IE (5.5-7) können mit display: inline + zoom: 1; inline-blöcke erstellt werden:
Code: 
<!--[if lt IE 8]>
<style>
#table-row {
text-align: center;
}

#table-cell, #table-cell .aufspanner, #table-cell img {
display: inline;
zoom: 1;
vertical-align: middle;
}

.aufspanner {
height: 500px;
}
</style>
<![endif]-->

Der .aufspanner soll den inline-block auf die nötige Höhe bringen:
Code: 
<div id="table">
<div id="table-row">
<div id="table-cell">
[COLOR="DarkRed"][B]<span class="aufspanner">[/B][/COLOR]</span><img src="http://s2.bmedien.eu/images/htmlde_skin_2.0_reloaded/logo.gif"  />
</div>
</div>
</div>
Ein Hack für den ff2 wäre viel komplizierter.

Wenn es wirklich nur um ein Bild geht, würde ich die Abmessungen mit php ausgeben.
Die zentrierung wäre simpel.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben