-1
// My HTML CODE HERE
<div id="main">
    <div id="wrap">
        <div class="header">
            <span class="img_frame">
                <img src="http://phone.pe.hu/main_logo_white.png">
            </span>
        </div>
    </div>
</div>

// My css CODE HERE
#wrap .header {
    position:relative;
    background-color: rgba(35, 81, 112, 0.9);
    opacity: 0.8;
    width:598px;
    height:72px;
    float:left;
    text-align: center;
    display: block;    
}

#wrap .header .img_frame {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

#wrap .header .img_frame img {
    display: inline-block;
    width: 182px;
    vertical-align: middle;
}

I tried to align the img tag into middle in span box which is defined inline-block display, but it doesn't work. (This method is referring to this answer : How to vertically align an image inside div)

the result can be seen here : https://jsfiddle.net/MaggiePhalk/Lmn8jaLe/2/

What should be corrected? plz.

Community
  • 1
  • 1
KoreanXcodeWorker
  • 395
  • 8
  • 15
  • You aren't following [How to vertically align an image inside div](http://stackoverflow.com/q/7273338/1529630) at all – Oriol Jul 10 '15 at 00:13
  • Oops, It was my fault. the solution is to pull img tag out of the span tag!(right after the ), but I don't still understand how it works that way. – KoreanXcodeWorker Jul 10 '15 at 05:01

2 Answers2

0

You can use the CSS display properties table and table-cell to vertically align, and margin: 0 auto to center the image.

CSS

#wrap .header {
    position:relative;
    background-color: rgba(35, 81, 112, 0.9);
    opacity: 0.8;
    width:598px;
    height:72px;
    float:left;
    text-align: center;
    display: table;
}
#wrap .header .img_frame {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
}
#wrap .header .img_frame img {
    display: table-cell;
    width: 182px;
    vertical-align: middle;
    margin:0 auto;
}

Working JSFiddle

More Information: CSS Vertical Aligning

bnahin
  • 796
  • 1
  • 7
  • 20
  • Wow, Thx for your idea. I've just now corrected the cause in the code of my question. It was just to pull out the img tag. OOPS. hehe. Anyway, I tried your solution and checked it also works well, then I need to review about table-cell properties. Thx. – KoreanXcodeWorker Jul 10 '15 at 05:04
0

This code uses the method referenced in the question

JSFiddle

Here is the code:

<div id="main">     
    <div id="wrap">
        <div class="header">
            <span class="img_frame"></span>
                <img src="http://phone.pe.hu/main_logo_white.png" height="30px"/>
        </div>
    </div>
</div>

#wrap .header {
    position:relative;
    background:transparent url('backgrounds/header7_814_opacity40.png') no-repeat;
    background-color: rgba(35, 81, 112, 0.9);
    opacity: 0.8;
    width:598px;
    height:72px;
    text-align: center;
    display: block;    
}

.img_frame {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
img{
    vertical-align: middle;
    max-height: 72px;
    max-width: 598;
}
geeves
  • 652
  • 7
  • 24