how to vertically center align div elements with contents other than text - html

Question

I'm stumped. I'm trying to figure out how to vertically center align a div with a border, to the right of a div with an image. The general problem is how to vertically center align any div next to any other div. Not just the text contents of a div. I've seen lots of potential solutions presented here, but none that work.
This is almost trivial with a table, but we're not supposed to use tables for positioning any more. I'm looking for a way to avoid using a table. I'm not finding one. One of the reasons cited for not using tables for positioning is how confusing they can be. I got news for those pundits. It can't possibly be more confusing than trying to do this with a div.
I have an example page with both. The title reflects my current attitude, which is why not use a table when it works?
http://popnowlin.com/whynot.html
<style type="text/css">
.mybox {
display:inline-block;
margin:0px 1em;
padding:1em;
border-style:solid;
}
</style>
...
<table style="width:100%">
<tr>
<td>
<img alt="" src="http://angelichomeservices.com/AHS.jpg" width=315 />
</td>
<td>
<div class=mybox>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</td>
</tr>
</table>
...
<div style="width:100%;">
<img alt="" src="http://angelichomeservices.com/AHS.jpg" width=315 />
<div class=mybox style="width:calc(100% - 315px - 4em - 6px);float:left;vertical-align:middle;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
The top example is using a table and it does just what I want. I can shrink or enlarge the width of the page, and the div with text in it shrinks and enlarges and stays vertically centered on the image.
The bottom example is my attempt to use div for the positioning, but all I can do is get the two to align vertically at the top. Also, having to use calc() in css is probably not the safest way to solve anything.
Anyone have a solution for this? Feel free to grab the code and go crazy. Thanks in advance.

Answer 1

CSS Tables would seem to be a solution.
JSFiddle demo
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
border: 1px solid grey;
}
<div class="parent">
<div class="mybox child">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<img class="child" alt="" src="http://angelichomeservices.com/AHS.jpg" />
</div>