✔ Bild in Div mittig positionieren...

[chaosente]

Also ich habe einen div in dem ein bild eingegschlossen ist.

<div id="user_pic">
	<img src="pics/" />
</div>

Nun soll das Bild 128*128px groß sein und einen double border mit 3px stärke haben. Der div soll 150*150px groß sein. Das bild soll horizontal sowie vertikal im div zentriert sein.

Ich schaffe es aber nur mit text-align: center; zur mitte zu bewegen. der zweite schritt fehlt mir.

Hat jemand nen plan davon, hab schon ewig bei google gesucht und nur merkwürdiges zeug gefunden.

 

[ms92]

Mach doch einfach für das Bild margin bzw. für den Div padding:

#user_pic{
width:128px;
height:128px;
padding:11px 11px 11px 11px;
}

 

[Maik]

Hi!

Oder so:

div#user_pic {
width: 150px;
height: 150px;
}

div#user_pic img {
margin: 11px;
}

 

[chaosente]

Also ich hab es jetzt mal so probiert. Und es funktioniert nciht. Die sachen von da oben haben auch nciht geklappt.

Bei meiner lösung hat sich mein bild erstaunlicherweise nciht mal vom oberen rand meines divs entfernt.

div#user_pic {
width: 150px;
height: 150px;
margin: 0 auto;
background: gray;
}

div#user_pic>img {
display: block;
margin-top:11px;
margin-bottom:11px;
margin-left:11px;
margin-right:11px;
}

 

[Maik]

Sorry, mein Fehler :-(

Nimm mal display:block wieder raus - ich hatte vergessen, die Angabe vorher aus dieser Variante zu entfernen:

div#user_pic {
width: 128px;
height: 128px;
padding: 11px;
}

div#user_pic img {
display: block;
}

Das ist der erweiterte Vorschlag von ms92, der in allen mir zur Verfügung stehenden Browsern einwandfrei funktioniert.

Und daraus wurde dann:

div#user_pic {
width: 150px;
height: 150px;
}

div#user_pic img {
/*display: block;*/ /* auskommentiert = deaktiviert */
margin: 11px;
}

Die display:block-Deklaration für das Grafikelement ist dem IE (<7) gewidmet, der die Whitespaces (Zeilenumbrüche, Einrückungen) im Quelltext rund um das <img>-Tag als 3px-Absatz unterhalb der Grafik darstellt.

In der margin-Variante liesse sich die Regel aber mit Hilfe eines Conditional Comments auf die älteren IE-Versionen anwenden:

<style type="text/css">
div#user_pic {
width: 150px;
height: 150px;
}

div#user_pic img {
margin: 11px;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
div#user_pic img {
display: block;
}
</style>
<![endif]-->

 

[chaosente]

Stimmt sowei hatt das oben alles geklappt danke schon mal.

Wenn ich jetzt aber eine variable bildgröße habe, bis maximal 128*128px und der äußere rahmen soll sich dem bild an passen wie mache ich dass?
div#user_pic {
width: 150px;
height: 150px;
}

wenn cih das weglasse macht er was komisches, dann ist der div gaanz breit. aber er soll nur vom img abhängig sein.

 

[Maik]

div#user_pic {
display: inline;
}

div#user_pic img {
padding: 11px;
border: 3px double red;
}

 

[chaosente]

dann ist das bild nicht eingeschlossen bei mir!

 

[Maik]

Falls du mit "nicht-eingeschlossen" die fehlende Hintergrundfarbe meinst:

div#user_pic {
display: inline;
}

div#user_pic img {
padding: 11px;
border: 3px double red;
background: gray;
}

 

[chaosente]

nein, ich meine, dass mein bild angezeigt wird und einwenig darunter der div mit seinem border und der hintergrundfarbe!