在响应式div中垂直居中图像[重复]答案

【问题标题】：Vertically center image in responsive div [duplicate]在响应式div中垂直居中图像[重复]
【发布时间】：2014-03-06 07:43:00
【问题描述】：

我有一个包含 2 个 div 的包含 div，一个向左浮动，另一个向右浮动。在两个内部 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">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

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

我做错了什么？有人可以告诉我吗？提前感谢您的宝贵时间。

【问题讨论】：

标签： css image html center

【解决方案1】：

试一试：

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

position: relative;

和图片：

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

应该可以！

【讨论】：

好的，谢谢！你就是男人！

【解决方案2】：

或者，您可以将其设为背景图像并执行以下操作：

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

【讨论】：