Das ist jetzt meine aktueller Code:
<html>
<head>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
div.picWithText img {
width: 250px;
height: 320px;
float: left;
background: green;
}
div.picWithText div {
height: 320px;
background: blue;
}
</style>
</head>
<body>
<div id="content">
<h2>Überschrift der Seite</h2>
<div class="picWithText">
<img src="typo3temp/pics/6b2bc080a6.jpg" width="300" height="398" alt="" />
<div>
<p>Bildbeschreibung Zeile 1</p>
<p>Bildbeschreibung Zeile 2</p>
<p>Bildbeschreibung Zeile 3</p>
</div>
</div>
<div class="csc-header csc-header-n2">
<h3>Hobbys</h3>
</div>
<ul class="csc-bulletlist csc-bulletlist-0">
<li class="odd">Hobby 1</li>
<li class="even">Hobby 2</li>
<li class="odd">Hobby 3</li>
</ul>
</div>
</body>
</html>
Ich schaffe es leider nicht die drei Zeilen mit der Bildbeschreibung vertical in ihrem Container zu zentrieren. Wie mache ich das am besten.
div.picWithText div {
height: 320px;
background: blue;
vertical-align: middle;
}
Das "vertical-align: middle" zeigt leider keine Wirkung. Ne Ahnung warum das keine Wirkung zeigt bzw. wie ich das am einfachsten löse?