Karl: vertikales zentrieren

Beitrag lesen

SELF-Forum

vertikales zentrieren

Karl
– Informationen zu den Bewertungsregeln

Anhand deiner Links habe ich das jetzt so versucht zu lösen:

  
<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;  
			}  
  
			div {  
				height: 320px;  
				background: red;  
			}  
  
			div.imageText {  
				display: table-cell;  
  				vertical-align: middle;  
				padding: 10px;  
			}  
  
		</style>  
  
	</head>  
  
  
  
	<body>  
  
		<div class="picWithText">  
  
			<img src="test.jpg">  
			<div class="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>

Scheint zu klappen. Allerdings ist es so, dass die Eigenschaft "table-cell" für "display" ab CSS 2.1 nichtmehr unterstützt wird. Was also tun.

ich wäre dir super dankbar,  wenn du meinen Code so wie du das meinst berichtigen könntest. Ich probiere das schon seid Stunden. Leider komme ich einfach zu keiner optimalen Lösung.

Beitrag melden
–
Informationen zu den Bewertungsregeln