在响应div中的垂直中心图像

我有一个内含2 div的div，一个向左浮动，另一个向右浮动。在两个内部divs之间，我有一个图像需要真正地集中。在响应div中的垂直中心图像

我环顾了网络寻找解决方案，但似乎没有为我工作。我在我的代码下面张贴。

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">[email protected]</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

需要垂直居中的图片是中间的箭头。

我做错了什么？有人可以让我知道吗？预先感谢您的时间。

来源

2014-02-08 geraldCelente

TRY：

添加到div的将图像包含参数：

position: relative;

和图像：

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

应该努力！

来源

2014-02-08 22:20:21

好，谢谢！你是男人！ – geraldCelente

或者，你可以把它的背景图像，并做到这一点：

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

来源

2014-02-08 22:25:24 danwarfel

在响应div中的垂直中心图像

回答

相关问题