I have this two columns layout; one column is the image, the other one is the text. the odd row image will float to the left, (which mean the odd row text is on the right) on even row, the image will float to the right, etc.
HTML
<div class="groupsection clear">
<p><img src="01.png" alt="" /></p>
<div class="want_center">
<h3>Title 1</h3>
<p>something 1</p>
</div>
</div>
<div class="groupsection clear">
<p><img src="02.png" alt="" /></p>
<div class="want_center">
<h3>Title 2</h3>
<p>something something</p>
</div>
</div>
CSS
.groupsection > p {float:left;}
.groupsection:nth-child(2n+1) > p {float:right;}
is there a way to center the text by the image, without knowing the height of the image? (since the images dimension will be different).