✔ Bild in div-Container vertikal positionieren

Status
Nicht offen für weitere Antworten.
tinella

tinella

Erfahrenes Mitglied
Liebe Leute:)

Ich möchte ein Bild innerhalb eines DIVs positionieren.
Das Problem ist zu sehen im Attachementbild (blauer Rand = div).

Mit padding-top etc. kann ich das nicht lösen, weil ich zwei Bildformate habe (hoch und quer), deshalb sollte es sich das von selbst zentrieren.

Hoffe ihr versteht was ich meine.

CSS vom Div:
Code: 
#content .thumbnail{
float:left;
width:100px;
height:100px;
display:inline;
margin: 15px 15px 0px 0px;
padding: 0px;
text-align:center;
}

CSS vom Bild:
Code: 
#content .thumbnail img{
border: 1px solid #778899;
padding: 1px;
vertical-align:middle;
}


Ich fummle + google da jetzt schon ne ganze Weile rum und seh noch immer keine Lösung, swär super wenn mir da jemand weiterhelfen könnte :confused:

Danke für allfällige Antworten, Tinella
 

Anhänge

  • vertikalepositionierungindiv.png
    vertikalepositionierungindiv.png
    26 KB · Aufrufe: 3.960
Zuletzt bearbeitet:
Hi,

studier mal in den beiden Beispielen die angewandte CSS-Technik zum vertikalen Zentrieren eines Elements:


Soviel sei hier aber schon mal verraten: die von dir verwendete aber falsch angewandte vertical-align:middle-Deklaration funktioniert in einem div-Element nur in Verbindung mit einem Tabellenwert für die display-Eigenschaft; Browserunterstützung für diese display-Tabellenwerte vorausgesetzt, die der IE mit seinen bisherigen Versionen nicht bietet. Dies wurde aber in den beiden Beispielen berücksichtigt.
 
Hallo,

ich wollte kein neues Thema öffnen, da mir dieses Thema fast geholfen hat, aber eben auch nur fast.

Anhand des Screenshots kann man erkennen, woran es bei mir hakt.
Der blaue Hintergrund zeigt, dass unterhalb des Bildes, das "form1" div noch ca.2-3 Pixel
verlängert wird, was mir mein Layout leider zerschießt.
Wenn ich dem "from1" eine Höhe zuweise, dann werden die Bilder nicht mehr vertical centriert, sondern oben geschoben.

Für Vorschläge, wie ich das lösen kann, wäre ich dankbar.

Danke

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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
* {margin:0;padding:0}
html,body{height:100%}
#wrapper{
	float:left;
	height:50px;
	width:50px;
	display:table;
	vertical-align:middle;
	background-color:red;
	margin:0 12px 2px 0;
}
#outer{
	display:table-cell;
	vertical-align:middle;
}
#formwrap{
	position:relative;
	left:50%;
	float:left;
}
#form1{
	padding:0 0;
	position:relative;
	text-align:right;
	left:-50%;
	background-color:blue; 
}

</style>
<!--[if gte IE 5]>
<style type="text/css">
#wrapper{	overflow:hidden;/* stop hoz scroll bar from appearing*/}
#formwrap {top:50%}
#form1{top:-50%;}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
	<div id="outer">
		<div id="formwrap">
			<div id="form1">
			<img src="images/p1.jpg" width="30" height="48">
			</div>
		</div>
	</div>
</div>
<div id="wrapper">
	<div id="outer">
		<div id="formwrap">
			<div id="form1">
			<img src="images/p4.jpg" width="48" height="30">
			</div>
		</div>
	</div>
</div>
</body>
</html>
 

Anhänge

  • vertical_align_ie7.jpg
    vertical_align_ie7.jpg
    9,3 KB · Aufrufe: 3.956
Hi,

dann schau dir einfach nochmal das Beispiel http://www.pmob.co.uk/temp/vertical-align3.htm genauer an.

Möglicherweise ist hier auch der Zusatz display:block für das <img>-Element hilfreich.

Im übrigen darf in einem HTML-Dokument eine ID nur einmal, und nicht, wie in deinem Fall, mehrfach vergeben werden.

mfg Maik
 
Hallo Maik,

danke für den Hinweis.

Mit dem Beispiel und img{display:block} hat es jetzt geklappt.

Die Sache mit der ID ist mir bekannt. Copy & Past Fehler, beim Testen. :rolleyes:

Gruß

Torsten
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück