vertically align div inside another div with a dynamic height - html

Question

I have a html page with a page title.
The height of the page title is determined by the height of the users photograph. The users photograph can be any size.
The issue that I cannot solve myself is that I am trying to vertical-align the text title to the middle of the title holder, but I am not able to figure this out if the photo has a dynamic height (the max-height is 149px). Assigning a specific height to the div does allow the middle vertical alignment, but as the users photograph can be any height, assigning a set height can make the appearance seem odd.
Here is what I am trying to achieve:
Does someone know how to vertical align middle the users name with a dynamic height? I have read several similar SO posts, tried several things but I cannot get this to work.
Here is my html code:
<div class="resumeStyleNameTitleWrapper">
<div class="resumeStyleNameTitle">
<div class="resumeStyleNameTitleInner">
<div class="resumeStyleNameTitleFontChange">Users Name</div>
</div>
</div>
<div class="resumeStyleNameTitlePhotograph">
<div class="resumeStyleNameTitlePhotographInner">
{# image has max-height: 149px & max-width: 149px; assigned in the css file #}
<img id="id_name_details_photograph" class="name_details_photograph_preview_dimensions" src="{{ name_details_photograph_url }}" />
</div>
</div>
</div>
Here is my CSS:
.resumeStyleNameTitleWrapper {
display: table-cell;
width: 100%;
}
.resumeStyleNameTitle {
direction: ltr;
display: table-cell;
float: left;
text-align: left;
width: calc(100% - 159px); /*less the width of the photograph plus 10px */
background-color: lime;
}
.resumeStyleNameTitleInner {
direction: ltr;
display: table-cell;
max-height: 149px;
text-align: left;
vertical-align: middle;
width: 100%;
background-color: orange;
}
.resumeStyleNameTitleFontChange {
direction: ltr;
font-size: 32px;
font-weight: bold;
text-align: left;
text-transform: uppercase;
width: 100%;
}
.resumeStyleNameTitlePhotograph {
direction: ltr;
display: table-cell;
float: right;
max-height: 149px;
max-width: 149px;
text-align: right;
vertical-align: top;
}
.resumeStyleNameTitlePhotographInner {
display: inline-block;
vertical-align: middle;
}
.name_details_photograph_preview_dimensions {
max-height: 149px;
max-width: 149px;
}

Answer 1

Example: http://jsfiddle.net/kevalbhatt18/78Lzadtt/2/
I solved your Problem by putting resumeStyleNameTitlePhotograph clss in to resumeStyleNameTitleInner
<div class="resumeStyleNameTitleWrapper">
<div class="resumeStyleNameTitle">
<div class="resumeStyleNameTitleInner">
<div class="resumeStyleNameTitleFontChange">Users Name</div>
</div>
<div class="resumeStyleNameTitlePhotograph">
<div class="resumeStyleNameTitlePhotographInner">
<img id="id_name_details_photograph" class="name_details_photograph_preview_dimensions" src="">
</div>
</div>
</div>
</div>
So now if your image size change then your text div will also change its height depending upon image div size

Answer 2

Simplify your markup
One div containing a text element and an img:
The parent div is given display: table and text-align: right to align the image to the right
The names element (h2 in my example) is given display: table-cell and vertical-align: middle to keep it vertically centered. text-align: left brings the name to the left
The image is given vertical-align to remove the default baseline gap
Full Example
Compatibility: display: table is recognised in IE8+ and all modern browsers.
* {
margin: 0;
}
.name {
background: #F00;
display: table;
width: 100%;
text-align: right;
}
.name > img {
max-height: 149px;
max-width: 149px;
vertical-align: middle;
}
.name > h2 {
text-align: left;
display: table-cell;
vertical-align: middle;
padding: 0 10px;
}
<div class="name">
<h2>John Smith</h2>
<img src="http://www.placehold.it/200X100" />
</div>

Answer 3

Try this
.container {
display: table;
width: 80%;
background: green;
padding: 5px;
}
.first-child {
display: table-cell;
text-align: center;
vertical-align: middle;
background: yellow;
}
.second-child {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.text {
color: red;
font-size: 20px;
}
<div class="container">
<div class="first-child">
<div class="text">
Username
</div>
</div>
<div class="second-child">
<img src="http://placehold.it/350x150" />
</div>
</div>
<br/>
<div class="container">
<div class="first-child">
<div class="text">
Username
</div>
</div>
<div class="second-child">
<img src="http://placehold.it/350x200" />
</div>
</div>
<br/>
<div class="container">
<div class="first-child">
<div class="text">
Username
</div>
</div>
<div class="second-child">
<img src="http://placehold.it/350x100" />
</div>
</div>

Answer 4

I will simply use table to accomplish this task. Neat and simple. No messing around with CSS, and I don't have to worry about browser compatibility.
Just ensure to set valign (vertical alignment) to middle on the column for username.
<table width="100%" border="0">
<tr>
<td width="52%" valign="middle">Username</td>
<td width="29%"> </td>
<td width="19%"><!-- IMAGE HERE --></div></td>
</tr>
</table>
HERE IS A FIDDLE