Mittige vertikale Positionierung von Bildern

[Robert Kuhlemann]

Hallo,
wollte weg von <table>, wo es die Positionierungsmöglichkeiten 'align=' und 'valign=' gibt. Hin zu einem Bereich - <span> oder <div> mit CSS beschrieben. Will Bilder mittig platzieren.
Text-align platziert einwandfrei auf der x-Achse. Ist in Selfhtml auch so beschrieben. Vertical-align dagegen tut nix. Jedenfalls nicht mit einem Bild. Auch mit Margin komme ich nicht weiter.
Kann es sein, dass es kein Pendant zu 'valign=' gibt?
Hat das W3CXYZ - Konsortium (und Bill & Co) da gepennt?

fragt Robert

[juewi]

Sofern Deine Grafiken unterschiedliche Abmessungen haben ist meines Wissens keine vernünftige vertikale Zentrierung in einem div möglich.

Mach eine Tabelle mit 1 Zelle in diesem div und zentrier darin die Grafik.

Ich brauche auf meiner Seite auch eine Zentrierung und bin trotz viel Recherche und hier nachfragen zu keinem anderen Ergebnis gekommen als eben das ganze simpel mit einer Tabellenzelle zu lösen.

Falls das Objekt/die Grafik immer dieselben Maße hat sieh Dir DAS mal an

LG, Jürgen

[Gunnar Bittersmann]

@@juewi:

Ich brauche auf meiner Seite auch eine Zentrierung und bin trotz viel Recherche und hier nachfragen zu keinem anderen Ergebnis gekommen als eben das ganze simpel mit einer Tabellenzelle zu lösen.

Wie bitte?

Live long and prosper,
Gunnar

[Robert Kuhlemann]

Sofern Deine Grafiken unterschiedliche Abmessungen haben ist meines Wissens keine vernünftige vertikale Zentrierung in einem div möglich.

Mach eine Tabelle mit 1 Zelle in diesem div und zentrier darin die Grafik.

Ja, ich bin letzlich zur Tabelle zurückgekehrt. Das Problem waren nicht nur unterschiedlich grosse Bilder - für eine Art Diaschau - sondern auch zentrierte Darstellung beim Druck. Und da kann man mit absoluten und errechneten Angaben nicht viel werden. Da funktionieren nur prozentuale und relative Angaben.

Schönen Dank - Robert

[Cyx23]

Hallo Robert,

Kann es sein, dass es kein Pendant zu 'valign=' gibt?

Du kannst für viele moderne Browser Tabellen per CSS nachbilden.

Oder, wenn die Höhe des umgebenden Elements immer ausreicht, etwas wie top:50%;margin-top:-(halbe Bild-Höhe)px versuchen.

Die Beispiele sind vielleicht interessant für Dich: Zentrieren per CSS, mittig zentrierte Inhalte, Zentriertes Div für alle Browser.

Grüsse

Cyx23

[Robert Kuhlemann]

Danke,
werde mir das nochmal zu Gemüte führen

Gruss Robert

[Gunnar Bittersmann]

@@Robert Kuhlemann:

Vertical-align dagegen tut nix. Jedenfalls nicht mit einem Bild.

„Angewendet auf: Elemente auf Inline-Ebene und 'table-cell'-Elemente“ [CSS2 §10.8.1]

Macht man den Container zu einem 'table-cell'-Element, dann wirkt 'vertical-align'. Jedenfalls in vernünftigen Browsern.

Markup:

<div class="pictureframe">  
  <img src="foo" alt="bar"/>  
</div>

Stylesheet:

div.pictureframe  
{  
  display: table-cell;  
  vertical-align: middle;  
}

Für IEs:

* html div.pictureframe /* IE 6 */  
{  
  font-size: 42px;  
}  
  
*:first-child+html div.pictureframe /* IE 7 */  
{  
  font-size: 42px;  
}  
  
* html div.pictureframe img /* IE 6 */  
{  
  vertical-align: middle;  
}  
  
*:first-child+html div.pictureframe img /* IE 7 */  
{  
  vertical-align: middle;  
}

Kann es sein, dass es kein Pendant zu 'valign=' gibt?

Doch, gibt es: 'vertical-align'.

Live long and prosper,
Gunnar

[Robert Kuhlemann]

Verstehe ich ehrlich gesagt nicht. Für horizontale Positionierung gibt es "text-align.." und es funktioniert sofort und bestens. Für horizontale Positionierung gibts zwar ein "vertical-align.." das aber bei Bildern versagt. Wieso muss ich da einen Wust von Codierung produzieren mit Browserabfragen und was weiss ich? Ich brauche schliesslich eine generelle Lösung für wechselnde Bilder. Na ja, schönen Dank trotzdem.

Robert

PS Bin wieder zu <table> und "valign=" zurückgekehrt...