• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

vertikale Bildzentrierung

S

seduele

Neues Mitglied
Eine Frage die ich nicht gelöst bekomme ist, wie schaffe ich es das die Produktbilder in der Übersicht in der betreffenden (gelb) div-box vertical zentriert sind. Mit "vertical-align:middle;" funktioniert es nicht, auch mit "margin:auto;" nicht.

Zum anschauen: Romane - buchsender.de

der betreffende css Code aus der "stylesheet.css":


  1. /* PRODUCT PREVIEW */
  2. .productPreview {
  3. padding:0;
  4. margin:0;
  5. }
  6. .productPreviewContent {
  7. width:155px;
  8. margin:0 0 15px 38px;
  9. border:2px solid #aaa; /*#d3c1da*/
  10. float:left;
  11. height:184px;
  12. line-height:11px;
  13. text-align:center;
  14. letter-spacing:-0.1px;
  15. background: #fbfaff;
  16. border-radius:5px;
  17. }
  18. .teil1 {
  19. background-color:lightgreen;
  20. height:30px;
  21. line-height:13px;
  22. position:relative;
  23. top:-1px;
  24. }
  25. .teil2 {
  26. background-color:yellow;
  27. height:129px;
  28. line-height:125px;
  29. position:relative;
  30. top:-1px;
  31. }
  32. .teil3 {
  33. background-color:lightblue;
  34. height:25px;
  35. vertical-align:bottom;
  36. position:relative;
  37. bottom:5px;
  38. text-align:left;
  39. padding-left:15px;
  40. }
 
Willkommen im Forum.

Nur im Firefox getestet:

HTML: 
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>New</title>
        <style type="text/css">

            .box {
                width: 200px;
                height: 200px;
                background: red;
                line-height: 200px;
                text-align: center;
            }

            .box img {
                vertical-align: middle;
            }

        </style>
    </head>

    <body>

        <div class="box">
            <img src="http://www.buchsender.de/images/product_images/thumbnail_images/120_0.jpg" alt="Bird" />
        </div>

    </body>

</html>
 
Alternativen:

Absolute Positionierung (top: 50%;margin-top auf die negative Hälfte der Höhe des Bildes setzen). Funktioniert prima in praktisch jedem Browser, ist jedoch je nachdem auf welcher Webseite es genutzt wird ggfs. sehr unhandlich.

Mit "display: table-cell;" das umgebende Element zu einer Tabellenzelle machen. Dann wirkt auch "vertical-align: middle;". Nachteil: geht im IE < 9 nicht.
 
ja habe ich Guru eine Lösung die auch ältere Browser mit einbezieht wäre zwar wünschenswert, jedoch bekomme ich deinen lösungsweg obwohl ich ihn kenne nbicht hin und weiss auch nicht woran es scheitert, möglicherweise an der Vererbung...
 
Okay, ich wollte nur – rein sachlich – sichergehen, weil ich („geht nicht in IE < 9“) für eine recht große Einschränkung halte. Das war nicht als: „threadis Lösung ist doof, nimm meine.“ gemeint.

PS: Für die Forentitel können wir nichts. :-|
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben