CSS Bild in div vertikal zentrieren

raffiSSL · 2. März 2011

Hallo,
ich möchte wie die Überschrift schon sagt ein Bild innerhalb eines Div-Containers vertikal zentrieren. Leider kann ich dies nicht mit einem festen Abstand machen, da die Höhe des Div-Containers variiert. Dies tut er weil neben dem Bild noch ein weiterer Div-Container mit Text existiert.
CSS:

Code:

#definition {
         padding: 1em;
         background: #cccccc;
         margin: 1.5em;
}

#defBild {
         float: left;
}

#defBild img {
         height: 40px;
}

#defInhalt {
        padding-left: 3em;
}

HTML:

Code:

<div id="definition">
                         <div id="defBild"><img src="lampe.gif"/></div>
                         <div id="defInhalt">
                              <h4>Überschrift:</h4>
                             ........Text......
                         </div>
</div>

Wie bekomme ich denn diese Zentrierung hin ohne auf eine Tabelle auszuweichen, wenn das überhaupt eine Verbesserung bringen würde.

MfG

NullPointer · 2. März 2011

Versuch mal, margin-top und margin-bottom auf auto zu setzen. Das könnte schon reichen.

raffiSSL · 2. März 2011

Hallo und danke, aber das brachte leider keinen Erfolg. Sprich das Bild hängt trotzdem noch an der selben Stelle fest.

2fastHunter · 2. März 2011

Wie man das mit CSS löst müsst eich auch erstmal nachschauen. Aber als Alternative kannst Du dir eine kleine Javascript-Funtkion schreiben, welche dann die vertikale Mitte berechnet, nachdem die Seite geladen wurde. Mit JQuery sollte das ein Dreizeiler werden

Ja das dynamische Mitwachsen ist einer der wenigen Nachteile von CSS gegenüber der HTML-Tabelle.

vindu · 2. März 2011

Hi,
schwierig sowas, hatte auch mal das Problem.
Du könntest es mal per css mit dem probieren:

display: table-cell; vertical-align: middle;

Mister Blue Sky · 2. März 2011

Zum leichteren Verständnis: Ergebnis Deines [modif.] Codes - mit hervorgehobenen Divs [.png]

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>x</title>

<style type="text/css">
/*<![CDATA[*/

#definition  {padding:1em; margin:1.5em;}
#defBild     {float:left;}
#defBild img {height:40px;}
#defInhalt   {padding-left:3em;}

/* Temp */

#definition  {border:2px solid blue;}
#defBild     {border:2px solid green;}
#defBild img {border:2px solid red;}
#defInhalt   {border:2px solid lime;}

/*]]>*/
</style>

</head><body>

<div id="definition">
<div id="defBild"><img 
src="http://1.2.3.11/bmi/pics.computerbase.de/avatare/benutzer/avatar149080_1.gif" 
alt="x" /></div>
<div id="defInhalt">
<h4>Überschrift:</h4>
........Text......</div></div>

</body></html>

Lösung: Ergebnis neuer Code - mit hervorgehobenen Divs [.png]

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>y</title>

<style type="text/css">
/*<![CDATA[*/

.wrap   {display:table; height:100px; margin-bottom:10px; float:left;}
.x01a   {display:table-cell; vertical-align:middle;}
.x01b   {width:500px; height:100px; float:left; padding-left:1em;}

/* Temp */

.wrap   {border:2px solid blue;}
.x01a   {border:2px dotted red;}
.x01b   {border:2px solid lime;}

/*]]>*/
</style>

<!--[if lt IE 8]><style>
.wrap   {display:block;}
.x01a   {height:0; he\ight:auto; zoom:1; vertical-align:middle; display:inline;}
</style><![endif]-->

</head><body>

<div class="wrap">
<div class="x01a">
<div><img 
src="http://1.2.3.11/bmi/pics.computerbase.de/avatare/benutzer/avatar149080_1.gif" 
alt="x" height="40"/></div>

</div></div><div class="x01b"><h4>Überschrift:</h4>
........Text......</div>

</body></html>

BS

raffiSSL · 2. März 2011

@Mister Blue Sky

Danke, genau so sollte es aussehen , hat aber leider nicht geklappt. Das Bild war dann zentriert aber der Text rechts daneben war unterhalb und nicht direkt neben dem Bild. Wahrscheinlich muss ich doch mit den festen Größenangaben arbeiten sonst wird das wohl nix oder?
Ich werde das aber vorerst nicht vertiefen. Hab so schon noch genug mit dem ganzen Projekt zutun, da werd ich mich nicht an dieser Kleinigkeit aufhängen.

Trotzdem Danke

Mister Blue Sky · 6. März 2011

Sry - die Antwort hab ich übersehen ...

Zitat: "... sonst wird das wohl nix oder? Ich werde das aber vorerst nicht vertiefen ..."

Das Problem ist mir m.M. hier im Forum schon öfters untergekommen -und- es dürfte wohl am scheinbar überaus
erfolgreichen Marketingkonzept von Adobe ^TM liegen ...

-----------------------------

HTML ist aber ein so genanntes Klartextformat. HTML-Dateien kannst Du mit jedem beliebigen Texteditor bearbeiten, der Daten als reine Textdateien abspeichern kann. Es gibt also keine bestimmte Software, die man zum Erstellen von HTML-Dateien benötigt.

Zwar gibt es längst mächtige Programme, die auf das Editieren von HTML spezialisiert sind, doch das ändert nichts an der entscheidenden Eigenschaft: HTML ist nicht an irgendein bestimmtes, kommerzielles Software-Produkt gebunden.

Diese wichtige, vielleicht sogar wichtigste Eigenschaft von HTML solltest Du im Auge behalten ...

[frei aus] Selfhtml: HTML als software-unabhängiges Klartextformat

-----------------------------

Tipp: Versuchs mal mit Notepad++ [chip.de]

BS

Suche

CSS Bild in div vertikal zentrieren

raffiSSL

Lt. Junior Grade

NullPointer

Lt. Commander

raffiSSL

Lt. Junior Grade

2fastHunter

Gast

vindu

Newbie

Mister Blue Sky

Gast

raffiSSL

Lt. Junior Grade

Mister Blue Sky

Gast

Ähnliche Themen