1

I have a containing div with 2 divs inside, one floated left, the other floated right. between the the two internal divs I have an image which needs to be centered verically.

I have looked around the web for solution, but none seems to work for me. I am posting below my code.

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;
}

I am posting a link to a picture of the result. http://i57.tinypic.com/16a2zj9.png http://it.tinypic.com/view.php?pic=16a2zj9&s=8#.UvarKrRDFuM

The images which needs being centered vertically is the arrow in the middle.

What I am doing wrong? Can somebody please let me know? Thank you in advance for your time.

geraldCelente
  • 1,005
  • 2
  • 16
  • 36

2 Answers2

1

Alternately, you can make it a background image and do this:

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

TRY:

to add to div in which image is contained parameter:

position: relative;

and to the image:

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

that should work!

coceban.vlad
  • 509
  • 1
  • 7
  • 23