tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
5
ZUGRIFFE
2320
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 28.09.04 20:28 #1
    JanQ JanQ ist offline Mitglied
    Registriert seit
    Sep 2004
    Beiträge
    22
    Wie kann ich ohne Tabellen in CSS in einem DIV Tag vertikal zentrieren.

    vertical-align:middle; funktioniert leider nicht.

    Danke für Hilfe.

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

    <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>
     
  2. 28.09.04 23:41 #2
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    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 :
    1
2
3
4
5
6
7
8
9
10

    .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;
          [B]position: relative;[/B]  /* Elemente innerhalb des DIVs können absolut zu diesem positioniert werden */}
    Die Elemente innerhalb dieses DIVs werden wie folgt absolut positioniert:
    Code :
    1
2
3
4
5
6
7
8
9
10
11

    .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 :
    1
2
3
4
5
6
7
8
9
10
11

    <table width="630" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td width="620">
            <DIV [B]class[/B]="picBox" align="center"><img src="Download.jpg" width="130" height="80" [B]class[/B]="thumb" /></DIV>
            <DIV [B]class[/B]="picBox" align="center"><img src="Download.jpg" width="130" height="80" [B]class[/B]="thumb" /></DIV>
            <DIV [B]class[/B]="picBox" align="center"><img src="Download.jpg" width="130" height="80" [B]class[/B]="thumb" /></DIV>
            <DIV [B]class[/B]="picBox" align="center"><img src="Download.jpg" width="130" height="80" [B]class[/B]="thumb" /></DIV>
            <DIV [B]class[/B]="picBox" align="center"><img src="Download.jpg" width="130" height="80" [B]class[/B]="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
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
  3. 29.09.04 00:36 #3
    Helge Helge ist offline Mitglied Silber
    Registriert seit
    Mar 2004
    Beiträge
    51
    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
     
  4. 29.09.04 10:52 #4
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    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 :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14

    .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
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
  5. 29.09.04 13:12 #5
    JanQ JanQ ist offline Mitglied
    Registriert seit
    Sep 2004
    Beiträge
    22
    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?
     
  6. 29.09.04 21:17 #6
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    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 :
    1
2
3

    .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-Code:
    <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
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
« Div height=100% wird im IE nicht angezeigt | CSS, ein paar fragen eines anfängers der sich mit css anfreunden will »

Ähnliche Themen

  1. Div vertikal zentrieren
    Von Radhad im Forum CSS
    Antworten: 10
    Letzter Beitrag: 31.08.09, 10:57
  2. div vertikal zentrieren die 2te
    Von ne0hype im Forum CSS
    Antworten: 12
    Letzter Beitrag: 07.02.08, 17:20
  3. Div im Div vertikal zentrieren
    Von hubbl im Forum CSS
    Antworten: 1
    Letzter Beitrag: 24.01.08, 16:49
  4. Div Inhalt Vertikal zentrieren
    Von D-LuX im Forum CSS
    Antworten: 3
    Letzter Beitrag: 15.10.07, 14:29
  5. div vertikal zentrieren
    Von tinella im Forum CSS
    Antworten: 0
    Letzter Beitrag: 29.09.06, 10:57