在響應div中的垂直中心圖像

Question

我有一個內含2 div的div，一個向左浮動，另一個向右浮動。在兩個內部divs之間，我有一個圖像需要真正地集中。

我環顧了網絡尋找解決方案，但似乎沒有爲我工作。我在我的代碼下面張貼。

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">name.surname@gmail.com</h2> 
     </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; 
} 

我張貼的鏈接結果的圖片。 http://i57.tinypic.com/16a2zj9.png http://it.tinypic.com/view.php?pic=16a2zj9&s=8#.UvarKrRDFuM

需要垂直居中的圖片是中間的箭頭。

我做錯了什麼？有人可以讓我知道嗎？預先感謝您的時間。

Answer 1

TRY：

添加到div的將圖像包含參數：

position: relative; 

和圖像：

position: absolute; 
top: 50%; 
margin-top: -(half of image height)%; 

應該努力！

Answer 2

或者，你可以把它的背景圖像，並做到這一點：

#the-img { 
    width: 100%; /* or set % or px inside container element */ 
    height: 100%; 
    background: url(logo.png) center center no-repeat; 
}