// 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.