vertikal zentrieren

[JürgenB]

Hallo,

für eine Bildergalerie habe ich kleine Vorschaubilder, die ich folgendermaßen anzeige:

  
<p><a href="p1.html"><img src="P1.JPG" alt=""></a><a href="p2.html"><img src="P2.JPG" alt=""></a>...</p>  

Da ich Bilder im Hoch- und im Querformat habe, ergibt sich eine etwas unruhige Ansicht. Daher dachte ich mir, den A-Elementen eine feste Höhe und Breite zu geben und die Bilder darin horizontal und vertikal zu zentrieren. Meine CSS-Entwirf dazu:

  
a   { display:block;width:180px;height:180px;float:left;border:1px solid black;padding:0px;margin:5px;  
      text-align:center;font-size:180px;line-height:180px }  
img { border:none;vertical-align:middle }  

Leider führt dieses nur im IE zum gewünschten Ergebnis, im Opera (8) sind die Bilder etwas zu tief, im FF viel zu tief angeordnet.

Eine starre Positionierung über margin oder padding ist nicht möglich, da die Vorschau mit einem kleinem C-Programm automatisch erstellt wird und nicht bekannt ist, welche Bilder im Hoch- oder Querformat sind.

Hat daher irgendjemand eine Idee, wie ich die Bilder auch im FF zentriert bekomme?

Gruß, Jürgen

PS
Mir ist natürlich klar, dass man bei so einer Frage sofort in die FAQ und ins Archiv geschickt wird. Ich war natürlich auch dort und habe neben vielen Verweisen auf das Archiv die Inspiration zu obiger Lösung gefunden sowie Lösungen mit "display:table ...", die aber vom IE ignoriert werden.

[SuppenHuhn]

Ich würde an Deiner Stelle das Ganze in eine Tabelle legen, dann kannst Du die Anordnung und Ausrichtung ganz leicht anpassen.

[JürgenB]

Hallo SuppenHuhn,

an die Tabellenlösung habe ich natürlich auch schon gedacht. Der Nachteil hierbei ist nur, das ich eine feste Spaltenzahl vorgeben muss. Dieses führt bei breitem Browserfenster zu leeren Flächen und bei schmalem Fenster zum horizontalen Scrollbalken.

Gruß, Jürgen

[berdn]

Hallo Jürgen,

als Tip: "line-height"

Ich hatte mal einen Blockelement die Höhe von 120 Pixeln gegeben, die "line-height" und "font-size" auf auf 120 Pixeln gesetzt. Und dem Bild die Eigenschaft  "vertical-align: middle" gegeben.

Spiel damit doch mal rum.

Un das ganze war noch am floaten, damit es sich der Bilschirmbreite anpassen konnte.

Firefox kennt auch "display: table-cell;"

Liebe Grüße,

Bernd

[JürgenB]

Hallo berdn,

danke für die Tipps, aber das habe ich alles schon ausprobiert.

Gruß, Jürgen

[berdn]

Hallo Jürgen,

funktioniert bei mir super.

CSS:
#myGallery ul {
  width: 100%;
}

#myGallery ul li {
  padding: 0;
  margin: 0;
  background: none;
  background: #dbe2e5;
  width: 113px;
  height: 123px;
  border-right: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
  float: left;
  text-align: center;
  /*line-height: 1px; */
  font-size: 123px !important; }

#myGallery ul li span {
  display: table-cell;
  background: #dbe2e5;
  vertical-align: middle;
  width: 113px;
  height: 123px;
  }

HTML:

<ul>
<li><span><a href="images_galerie/galerie_gross_01.jpg" target="_blank"><img alt="" src="images_galerie/galerie_klein_01.jpg" /></a></span></li>
</ul>

Die Thumbnails sind 99x74 und 74x99

Liebe Grüße,

Bernd

[JürgenB]

Hallo berdn,

funktioniert bei mir super.

echt? Bei mir nicht. Hast du mal einen Link auf eine Beispielseite?

Gruß, Jürgen

[berdn]

Hallo Jürgen,

funktioniert sper bei mir in:
IE 6, IE 5.5, FF 1.5, Opera 8, Safari 2.x
Spiel mal ein wenig rum und lass natürlich
#myGallery  weg.

Ansonsten anderes Prinziep, aber das waren mir zu viele CSS Hacks:
< http://www.brunildo.org/test/ImgThumbIBL2b.html>

Liebe Grüße,

Bernd

[berdn]

Hallo Jürgen,

mein Bespiel kann ich Dir erst in ca. 6 Wochen zeigen,
da noch nicht online.

Und es ist mir jetzt zu aufwendig alle Referenzen auf den Kunden zu entfernen.

Tut mir Leid,

Aber Du hast jetzt alles was Du brauchst.

Bernd

[JürgenB]

Hallo berdn,

funktioniert sper bei mir in:
IE 6, IE 5.5, FF 1.5, Opera 8, Safari 2.x

ich bin jetzt ziemlich ratlos. Bei mir klappt es einfach nicht. Ich habe es jetzt mal hochgeladen, vieleicht schaut es sich mal jemand an.

http://www.j-berkemeier.de/test/zentrieren.html

Gruß, Jürgen

[berdn]

Hallo Jürgen,

etwas mit dem Source gespielt und es funktioniert bei mir.

Liebe Grüße,

Bernd

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Zentrieren</title>
<style type="text/css">
ul {
  list-style: none;
}

ul li {
  margin: 0 12px 12px 0;
  padding: 0;
  width: 230px;
  height: 230px;
  border:1px solid black;
  float: left;
  text-align: center;
  font-size: 230px;
  vertical-align: top;
  }

ul li span {
  display: table-cell;
  vertical-align: middle;
  width: 230px;
  height: 230px;
  }

ul li img { vertical-align: middle; border: none;  }

</style>
</head>
<body>
<h1>Test Zentrieren</h1>
<ul>
  <li><span><a href="#"><img src="P1000615.jpg" alt="" /></a></span></li>
  <li><span><a href="#"><img src="P1000616.jpg" alt="" /></a></span></li>
  <li><span><a href="#"><img src="P1000615.jpg" alt="" /></a></span></li>
  <li><span><a href="#"><img src="P1000616.jpg" alt="" /></a></span></li>
</ul>
</body>
</html>

[JürgenB]

Hallo berdn,

vielen Dank für deine Hilfe. Der IE macht die Boxen zwar etwas zu hoch, aber die Bilder sind wenigstens zentriert.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

An diesen Zeilen liegt es. Ersetze ich sie durch

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

geht es nicht mehr.

Gruß, Jürgen

[berdn]

Hallo Jürgen,

dann setze doch die Schriftgröße einfach auf 215px ;-)

Dann passt das schon.

Liebe Grüße,

Bernd

[JürgenB]

Hallo berdn,

dann setze doch die Schriftgröße einfach auf 215px ;-)

Dann passt das schon.

stimmt. Das ist zwar "Frirkelei", aber das kennt man ja im IE.

Zu deinem CSS, das ich gerne auch verstehen würde:

Die Angabe der font-size ist für den IE und das SPAN mit height ist für den FF?
Warum funktioniert das nur mit xhtml1.0 und nicht mit html 4.01?

Gruß, Jürgen

[berdn]

Hallo Jürgen,

Die Angabe der font-size ist für den IE und das SPAN mit height ist für den FF?

ja, der IE kennt halt noch nicht display: table-cell

Warum funktioniert das nur mit xhtml1.0 und nicht mit html 4.01?

Das ist so nicht ganz richtig, es funktioniert sowohl mit HTML als auch XHTML nicht wenn der doctype "strict" ist.

Warum keine Ahnung, ich war froh das es funktionierte.
Hab dafür so zwei Stunden ein paar Dinge ausprobiert.

... Vorlage war die Katzengallerie, aber das waren mir dann zuviele Hacks.

Zumal in den projekt wo ich das benutze immer schon ein Haufen CSS vorgeladen wird was ich dann meist wieder überschreiben muss.

Liebe Grüße,

Bernd

[flowh]

Hallo Jürgen!

Spendier doch deinen Bilder mal ein margin: auto;, das müsste - vom IE abgesehn - funktionieren.

Servus

[JürgenB]

Hallo flowh,

danke für den Tipp. Leider hat das auch keine Änderung gebracht.

Gruß, Jürgen