Karl: vertikales zentrieren

Beitrag lesen

SELF-Forum

vertikales zentrieren

Karl
– Informationen zu den Bewertungsregeln

Hi,

eine Frage zu diesem Markup:

  
<html>  
  
	<head>  
  
		<style type="text/css">  
  
			* {  
  
				margin: 0px;  
  
				padding: 0px;  
  
			}  
  
			  
  
			.picWithText img {  
  
				width: 250px;  
  
				height: 320px;  
  
				float: left;  
				background: green;  
  
			}  
  
			.picWithText:after {  
				content: ".";  
				display: block;  
				height: 0;  
				clear: both;  
				visibility: hidden;  
			}  
  
			#imageText {  
				float: left;  
  				background: blue;	  
			}  
  
		</style>  
  
	</head>  
  
  
  
	<body>  
  
		<div class="picWithText">  
  
			<img src="test.jpg">  
			<div id="imageText">  
  
				<p>Bildbeschreibung Zeile 1</p>  
  
				<p>Bildbeschreibung Zeile 2</p>  
  
				<p>Bildbeschreibung Zeile 3</p>  
			</div>  
  
		</div>  
  
		  
  
		<h3>Diese Liste soll unter dem Foto stehen</h3>  
  
		<ul>  
  
			<li>Punkt 1</li>  
  
			<li>Punkt 2</li>  
  
			<li>Punkt 3</li>  
  
		</ul>  
  
		  
  
	</body>  
  
</html>

Die Zeilen "Bildbeschreibung Zeile 1", "Bildbeschreibung Zeile 2" und "Bildbeschreibung Zeile 3" sollen neben dem dem Foto test.jpg stehen, und zwar so, dass der Abstand von "Bildbeschreibung Zeile 1" zum oberen Rand des Fotos genauso groß ist, wie der Abstand von Bildbeschreibung Zeile 3" zum unteren Rand des Fotos.

Ich probiere das jetzt schon Ewigkeiten. Ich bekommme es einfach nicht hin. Seid so nett und sagt mir wie ich das am besten löse.

Beitrag melden
–
Informationen zu den Bewertungsregeln