# Im DIV Tag vertikal zentrieren



## JanQ (28. September 2004)

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

vertical-align:middle; funktioniert leider nicht.

Danke für Hilfe.


```
<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>
```


----------



## Quaese (28. September 2004)

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.

```
.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:

```
.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:

```
<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


----------



## Helge (29. September 2004)

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


----------



## Quaese (29. September 2004)

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:

```
.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


----------



## JanQ (29. September 2004)

*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?


----------



## Quaese (29. September 2004)

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.

```
.thumb{ border: 1px solid #e1e1e1;
        BORDER-COLLAPSE: collapse;
        background-color: #f2f2f2;}
```
Der HTML-Code mit dem PHP-Teil könnte zum Beispiel so aussehen:

```
<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


----------

