nicht angemeldet
vertikales zentrieren
Gunnar BittersmannHi,
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.
-
@@Karl:
Ich probiere das jetzt schon Ewigkeiten. Ich bekommme es einfach nicht hin.
Und was hat dich davon abgehalten, dich auf der aktuellen Startseite des Forums umzusehen? Dort wärst du auf den Thread Mittige vertikale Positionierung von Bildern gestoßen und in meiner Antwort hättest du den Link zu der Lösung gefunden.
Live long and prosper,
Gunnar--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)-
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.
-
@@Karl:
Scheint zu klappen. Allerdings ist es so, dass die Eigenschaft "table-cell" für "display" ab CSS 2.1 nichtmehr unterstützt wird.
Wie kommst du darauf?
Was also tun.
Lesen: [CSS21 §9.2.4]
Live long and prosper,
Gunnar--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
-
-