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

Bild horizontal und vertikal in div zentrieren will vertikal nicht

  • Ersteller Ersteller sysop
  • Erstellt am Erstellt am
S

sysop

Guest
GELÖST Bild horizontal und vertikal in div zentrieren will vertikal nicht

Das gibt es nicht, ich lese wohl immer wieder über den selben Fehler.

HTML: 
<div class="zufallsbild">   
<a name="Bild" onclick="window.open('viewpic.php?bild=img/Burka.jpg', 'Bild_gross','width=50, height=50,top=20,left=30,scrollbars=1')"><img alt="img/Burka.jpg" src="img/Burka.jpg" style="width:120px; height:120px; border:1px solid black; cursor:pointer;"></a> 
</div>

CSS-Code:
Code: 
.zufallsbild 
{ 
    height : 135px; 
    top : 180px; 
    bottom : 50px; 
    width : 170px; 
    border : 4px solid #E1A22B; 
    margin-left : 12px; 
    position : absolute; 
    background-color : #F7E4C4; 
    text-align : center; 
    vertical-align : middle; 
} 
 
.zufallsbild img 
{ 
    vertical-align:middle; 
} 
 
.zufallsbild a 
{ 
    vertical-align:middle; 
}

Was nicht klappt ist die vertikale Ausrichtung.



LÖSUNG des Problems:
CSS

Code: 
.zufallsbild 
{ 
[COLOR=#ff0000]    display                    :table; 
[/COLOR]    height                    : 135px; 
    top                        : 180px; 
    bottom                    : 50px; 
    width                    : 170px; 
    border                    : 4px solid #E1A22B; 
    margin-left                : 12px; 
    float                    : left; 
    position                : absolute; 
    background-color        : #F7E4C4; 
    text-align                : center; 
    vertical-align            : middle; 
} 
 
.inner 
{ 
    width:100%; 
[COLOR=#ff0000]    display:table-cell; 
[/COLOR]    vertical-align:middle; 
    position:relative; 
    text-align:center; 
} 
 
.inner img 
{ 
    display:inline; 
    vertical-align:middle; 
}

HTML: 
<div class="zufallsbild"> 
    <div class="inner"> 
    <a name="Bild" onclick="window.open('viewpic.php?bild=img/Burka.jpg',  'Bild_gross','width=50,  height=50,top=20,left=30,scrollbars=1')"><img alt="img/Burka.jpg"  src="img/Burka.jpg" style="width:120px; height:120px; border:1px solid  black; cursor:pointer;"></a> 

    </div> 
</div>
 
Zuletzt bearbeitet von einem Moderator:
Hinweis dennoch: "display: table;" wird vom IE<=7 nicht erkannt. Wenn dir das egal ist, passt es.
 
Habe mir das Ganze mal testweise einfach nachgebastelt. Du hast Recht, "margin auto" funktioniert nicht.
Bei der mittigen Positionierung von Bilder muss man mit entsprechenden Angaben arbeiten.

Wenn du die Höhe von ".zufallsbild" auf 36 festlegst, dann sollte es mit diesem kompletten CSS-Block funktionieren:

Code: 
.inner 
{ 
    width:100%;
    height:100%;
} 
 
.inner img 
{ 
    display:block; 
    margin:8px auto 25 px auto;
}

Vorausgesetzt die Vorschaubilder sind alle 120x120 Pixel!
 
Edit: Wenn es hier für den Anwendungsfall nicht passt: Egal, ist trotzdem interessant zu wissen.


Laut fricca:

- Bild mittig ausrichten - XHTMLforum

HTML: 
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <title>title</title>
        <style>
/*<![CDATA[*/
.container {
    position: relative;
    width: 300px;
    height: 300px;
    background: blue;
}

.inner {
    position: absolute;
    width: 100px;
    height: 100px;
    background: red;

    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
}
/*]]>*/
        </style>
    </head>

    <body>
        <div class="container">
            <div class="inner">
                .inner
            </div>
        </div>

    </body>

</html>

Wenn jemand Sachen zentrieren kann, ist es fricca.

- CSS vertical center using float and clear
 
Die Lösung ist auch interessant.
Ich habe allerdings nicht alles verraten ;ugl

Es werden Zufallsbilder angezeigt, die natürlich keine feste Grösse haben. Das Thumbnail, das angezeigt wird wird nur gerechnet, wenn das Bild grösser als der Anzeigebereich ist, sonst wird die original Grösse verwendet.

Mit relativen Grössen scheint das Ganze problematischer zu sein (ein CSS Manco offensichtlich)
Danke jedenfalls nochmal, sowas kann man ja immer brauchen.

PS
Die ie > 7 Problematik ist mir bekannt, ich denke aber, dass Leute, die ständig das neueste Auto und/oder iPhone brauchen auch ihren Browser halbwegs uptodate halten können. Ich ignoriere also Browser, die geltende Versionsnummern um mehr als 1 Version unterbieten. Mag vermessen klingen, ich handhabe das aber so brachial.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben