Im DIV Tag vertikal zentrieren

Status
Nicht offen für weitere Antworten.
J

JanQ

Mitglied
Wie kann ich ohne Tabellen in CSS in einem DIV Tag vertikal zentrieren.

vertical-align:middle; funktioniert leider nicht.

Danke für Hilfe.

Code: 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
#picBox {
	float: left;
	background-color: #f2f2f2;
	border: 1px solid #e1e1e1;
	vertical-align:middle;
	text-align:center;
	height: 142px;
	width: 142px;
	position: relative;
	margin-right: 10px;
	margin-bottom: 10px;
	padding: 5px;
}
#thumb {
 	BORDER-RIGHT: #e1e1e1 1px solid; 
 	BORDER-TOP: #e1e1e1 1px solid; 
 	BORDER-LEFT: #e1e1e1 1px solid; 
 	BORDER-BOTTOM: #e1e1e1 1px solid; 
 	BORDER-COLLAPSE: collapse;
 	background-color: #f2f2f2;
}
-->
</style>
</head>

<body>
<table width="630" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="620">
		
<DIV id=picBox align="center"><img src="Download.jpg" width="130" height="80" id="thumb" /></DIV>
<DIV id=picBox align="center"><img src="Download.jpg" width="130" height="80" id="thumb" /></DIV>
<DIV id=picBox align="center"><img src="Download.jpg" width="130" height="80" id="thumb" /></DIV>
<DIV id=picBox align="center"><img src="Download.jpg" width="130" height="80" id="thumb" /></DIV>
<DIV id=picBox align="center"><img src="Download.jpg" width="130" height="80" id="thumb" /></DIV>

	</td>
  </tr>
</table>
</body>
</html>
 
Hi,

wenn die Höhe und die Breite bekannt sind, sollte ein Zentrieren über absolute
Positionierung möglich sein.

Zunächst wird dem umschliessenden DIV die CSS-Eigenschaft position: relative;
zugewiesen.
Code: 
.picBox { float: left;
          background-color: #f2f2f2;
          border: 1px solid #e1e1e1;
          text-align: center;
          height: 142px;
          width: 142px;
          margin-right: 10px;
          margin-bottom: 10px;
          padding: 5px;
          position: relative;  /* Elemente innerhalb des DIVs können absolut zu diesem positioniert werden */}
Die Elemente innerhalb dieses DIVs werden wie folgt absolut positioniert:
Code: 
.thumb { BORDER-RIGHT: #e1e1e1 1px solid;
         BORDER-TOP: #e1e1e1 1px solid;
         BORDER-LEFT: #e1e1e1 1px solid;
         BORDER-BOTTOM: #e1e1e1 1px solid;
         BORDER-COLLAPSE: collapse;
         background-color: #f2f2f2;
         position: absolute; /* Bild in der umschliessenden Box absolut positionieren */
         top: 50%;           /* Obere linke Ecke vertikal zentrieren */
         margin-top: -40px;  /* Um die Hälfte der Höhe nach oben korrigieren */
         left: 50%;          /* Obere linke Ecke horizontal zentrieren */
         margin-left: -65px; /* Um die Hälfte der Breite nach links korrigieren */}
Ausserdem müssen die CSS-Definitionen Klassen (.thumb, .picBox) sein und
keine IDs (#thumb, #picBox), da IDs in einem Dokument eindeutig sein müssen!

Der HTML-Code sieht somit folgendermassen aus:
Code: 
<table width="630" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td width="620">
            <DIV class="picBox" align="center"><img src="Download.jpg" width="130" height="80" class="thumb" /></DIV>
            <DIV class="picBox" align="center"><img src="Download.jpg" width="130" height="80" class="thumb" /></DIV>
            <DIV class="picBox" align="center"><img src="Download.jpg" width="130" height="80" class="thumb" /></DIV>
            <DIV class="picBox" align="center"><img src="Download.jpg" width="130" height="80" class="thumb" /></DIV>
            <DIV class="picBox" align="center"><img src="Download.jpg" width="130" height="80" class="thumb" /></DIV>
        </td>
    </tr>
</table>
Das Ganze konnte ich jedoch nur im IE6 testen. Dort funktioniert es allerdings
problemlos.

Ich hoffe, das hilft Dir weiter.

Ciao
Quaese
 
das mit den negativen margins funktioniert glaube ich nur in opera und ie5 für den mac nicht

im weiteren

BORDER-RIGHT: #e1e1e1 1px solid;
BORDER-TOP: #e1e1e1 1px solid;
BORDER-LEFT: #e1e1e1 1px solid;
BORDER-BOTTOM: #e1e1e1 1px solid;

kannst du zu << border: 1px solid #e1e1e1; >> zusammenschreiben
 
Hi,

habe beim Testen heute festgestellt, dass es im Netscape 7.1 und im Opera 7.22
nicht funktioniert - sorry.

Eine alternative Möglichkeit könnte das Ausrichten mit margin-top und margin-bottom
sein. Da die Grössen von Deinem Download-Bild immer gleich ist, könnte durch
einen festen Abstand zum oberen und unteren Rand ein vertikales Zentrieren
erreicht werden.
Dazu musst Du aber auf das padding: 5px; in der Klasse .picBox verzichten,
da es sonst durch den Box-Model-Bug im IE zu Fehlausrichtungen kommt.

CSS:
Code: 
.picBox { float: left;
          background-color: #f2f2f2;
          border: 1px solid #e1e1e1;
          text-align: center;
          height: 142px;
          width: 142px;
          margin-right: 10px;
          margin-bottom: 10px;}

.thumb { border: 1px solid #e1e1e1;
         BORDER-COLLAPSE: collapse;
         background-color: #f2f2f2;
         margin-top: 29px;     /* Abstand zum oberen Rand */
         margin-bottom: 29px;  /* Abstand zum unteren Rand */}
Der HTML-Code bleibt der gleiche wie bisher.

Damit konnte ich das vertikale Zentrieren erfolgreich im IE 4, IE 5.0, IE 5.5, IE6, Netscape 7.1,
Mozilla 1.6, Firebird 0.9.1 und Opera 7.22 testen.

Ciao
Quaese
 
Variable Bildgrößen

Danke Quaese,

... die Bilder kommen aus einer Datenbank und haben unterschiedliche Größen.
Dadurch kann ich die feste Positionierung nicht einsetzen.

Gibt es eine andere Möglichkeit bei einer fest definierten DIV Box Bilder vertikal zu zentrieren?
 
Hi,

wenn die Bilder aus einer Datenbank kommen, steht Dir eventuell PHP zur Verfügung.
Damit sollte es eigentlich möglich sein, mit Hilfe von getimagesiz() die Bildgrösse
zu ermitteln und damit die margin-top- und margin-bottom-Werte zu berechnen.

Du könntest dann die margin-Angaben in der Klasse .thumb weglassen. Dafür
trägst Du die berechneten Werte in das betroffene Bild direkt ein.
Code: 
.thumb{ border: 1px solid #e1e1e1;
        BORDER-COLLAPSE: collapse;
        background-color: #f2f2f2;}
Der HTML-Code mit dem PHP-Teil könnte zum Beispiel so aussehen:
PHP: 
<table width="630" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td width="620">

        <?php
            $intDivHeight = 142;              // Höhe der umschliessenden Divs
            $strSrc = "Download.jpg";         // Bildquelle aus Datenbank, z.B. $strSrc = $row['bild'];
            $arrSize = getimagesize($strSrc); // Bildgrösse ermitteln
            // Bild mit umgebenden Div ausgeben
            echo("<DIV class=\"picBox\" align=\"center\"><img src=\"".$strSrc."\" width=\"".$arrSize[0]."\" height=\"".$arrSize[1]."\" class=\"thumb\" style=\"margin-top:".(($intDivHeight-4-$arrSize[1])/2)."px; margin-bottom:".(($intDivHeight-4-$arrSize[1])/2)."px\"></DIV>");
        ?>

        </td>
    </tr>
</table>
Vielleicht bringt Dich ja das weiter.

Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück