Question

我有一个内含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

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

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

Answer 1

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

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

Answer 2

TRY：

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

position: relative;

和图片：

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

应该有用！

在响应div中垂直居中图像

2 个答案: