Vertical align floated image + container (H+p) - html

Question

I want to center an floated image and a container (paragraph + heading):
.row {
display: block;
/* width: 100%; */
}
.left {
float: left;
}
.right {
float: right;
}
<div class="row">
<div class="container">
<img class="right" src="" width="300" height="300" />
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet</p>
<div style="clear: both"></div>
</div>
</div>
<div class="row">
<div class="container">
<img class="left" src="" width="300" height="156" />
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet</p>
<div style="clear: both"></div>
</div>
</div>
Here is also a live version of the problem. I have cleared the floats but now I can't center the .img and .container element. What would you slove the problem?

Answer 1

You have no luck with floated elements since they don't obey vertical-align. You can instead use display: table-cell along with vertical-align: middle and that would work perfectly. Albeit you will need to modify your HTML structure a little bit to place the content first before the image and vice versa depending on the way you want the content and images to appear on the front-end.
.container {
display: table;
}
.content {
width: 50%;
display: table-cell;
vertical-align: middle;
}
.image {
width: 50%;
display: table-cell;
vertical-align: middle;
}
.image img {
width: 100%;
}
<div class="row">
<div class="container">
<div class="content">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="image">
<img src="http://dev.dashbox.si/media/wysiwyg/vsebina-dashboxa.jpg" />
</div>
</div>
</div>
<div class="row">
<div class="container">
<div class="image">
<img src="http://dev.dashbox.si/media/wysiwyg/vsebina-dashboxa.jpg" />
</div>
<div class="content">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>

Answer 2

Basically what you can do to vertically align text is change the display of the container to table then the paragraph to table-cell and then set the vertical-align to middle looking like this:
.row {
display: table;
overflow: hidden;
}
.left, .right {
display: table-cell;
vertical-align: middle;
}
You might also need to set overflow to hidden on the container so that the height is maintained because of the floats.