I'm struggling with centering an image vertically between two floated internal divs within a containing div. I've searched online for solutions, but none seem to work for me. Below is the code I'm using:
HTML:
<div id="rt-banner2">
<div id="rt-contact_card">
<h1 class="_site-title">Title</h1>
<h2 class="site-subtitle">SubTitle</h2>
<h2 class="_site-title">Mob: +123 453 769</h2>
<h2 class="_site-title"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="107e717d753e6365627e71...
</div>
<div id="site-header">
<img src="http://mydomain.com/wp-content/themes/themeName/images/stock-photo-dried-rose-buds-tea.jpg" width="531px" height="246px" alt="">
</div>
<span><img id="rt-arrow-div" src="http://mydomain.com/wp-content/themes/themeName/images/arrow.png" alt=""></span>
<div class="rt-clear"/>
</div>
Css:
#rt-banner2 {
border-top: 25px solid #be2331;
border-bottom: 25px solid #be2331;
height:246px;
width:100%;
text-align: center;
}
#rt-contact_card
{
float:left;
width:431px;
background:teal;
height:100%;
}
#rt-contact_card h1
{
text-align:center;
font-size:1.3em;
}
#rt-contact_card h2
{
text-align:center;
font-size:1.2em;
}
#rt-banner2 span {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#rt-banner2 span img
{
vertical-align: middle;
max-height: 246px;
}
#site-header
{
float:right;
width:531px;
}
.rt-clear
{
clear:both;
}
I have included a link to a screenshot of the current result.
The arrow in the center is the image I am trying to vertically center. Can anyone help me figure out what I am doing wrong? Thank you for your assistance.