css using float: right with vertical-align: middle - html

Question

I have 2 divs (in a wrapper) that I am using to display a photograph and the title of the photograph side by side and vertical-align as middle.
The issue that I am having is that when I attempt to float the photograph to the right and float the title to the left, the title and photograph are no longer vertical-aligned as middle.
It seems that when I use float, the vertical-align becomes top.
How do I add the floats and keep the vertical-align as middle? I have spent 2 hours trying all I know. I hope someone can point out what I have done wrong.
Here is my code:
<div class="live_preview_top_header_wrapper">
<div class="live_preview_top_header_title">Title</div>
<div class="live_preview_top_header_photograph">
<img id="id_name_details_photograph_01_live_preview" src="{{ name_details_photograph_url }}" />
</div>
</div>
.live_preview_top_header_wrapper {
width: 100%;
background-color: #ffaaaa;
vertical-align: top;
}
.live_preview_top_header_title {
display: inline-block;
background-color: #aaaaff;
vertical-align: middle;
float: left;
}
.live_preview_top_header_photograph {
display: inline-block;
background-color: #cc0033;
vertical-align: middle;
float: right;
}

Answer 1

Try centering with Line-Height in the parent Div, and using vertical-align: middle; on the content eg image and title.
Example
.live_preview_top_header_wrapper {
width: 100%;
background-color: #ffaaaa;
line-height: 200px;
}
.live_preview_top_header_wrapper {
width: 100%;
background-color: #ffaaaa;
line-height: 200px;
}
.live_preview_top_header_photograph {
display: inline-block;
background-color: #cc0033;
float: right;
line-height: 200px;
}
.live_preview_top_header_photograph img {
vertical-align: middle;
}