垂直对齐不适用于所有屏幕分辨率

Question

我有下面的代码和JS小提琴，它可以在所有浏览器上垂直对齐文本和图像。但是，在某些屏幕分辨率下，它将标题文本“TESTER”推到黑线下方，如屏幕截图所示。请让我知道我能做些什么来解决这个问题。谢谢。

http://jsfiddle.net/w7ba1vyb/3/

#heading{ 
 
    margin: auto; 
 
    display: block; 
 
} 
 
#header{ 
 
    padding: 5px 0 0 0; 
 
    width: 100%; 
 
    background-color: black; 
 
    color: white; 
 
    vertical-align: middle; 
 
    height: 70px; 
 
    
 
} 
 
#content{ 
 
    width: 57%; 
 
    margin: auto; 
 
    float: left; 
 
    
 
} 
 
img{ 
 
    position: relative; 
 
    top: 8px; 
 
    width: 50px; 
 
    height: 50px; 
 
    
 
} 
 
#headtxt{ 
 
    font-family; ethno; 
 
    font-size: 50px; 
 
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; 
 
    color: black; 
 
    margin-left: 10%; 
 
    
 
} 
 
#socialshare{ 
 
    float: right; 
 
    width: 23%; 
 
    padding: 5px; 
 
}

<div id="heading" > 
 
    <div id="header" > 
 
    <div id="content" > 
 
     <a href="http://www.ccc.com" style="text-decoration: none; 
 
color: transparent; 
 
cursor: none;"> 
 
     <img src="images/newlogo200x200.png" /> 
 
     </a> 
 
     <span id="headtxt" > 
 
     TESTER 
 
     </span> 
 
    </div> 
 
    <div id="socialshare" > 
 
<a href="http://www.facebook.com/ccc" target="_blank"><img src="marketing/fbwhite.png" width="48px" height="48px"></a> 
 
<a href="http://www.twitter.com/ccc" target="_blank"><img src="marketing/twitterwhite.png" width="48px" height="48px"></a> 
 
<a href="http://www.instagram.com/ccc" target="_blank"><img src="marketing/igwhitev1.png" width="48px" height="48px"></a> 
 
</div> 
 
\t </div> 
 

 
</div>

Answer 1

试试这个

#heading{ 
    margin: auto; 
    display: block; 
} 
#header{ 
    padding: 5px 0 0 0; 
    width: 100%; 
    background-color: black; 
    color: white; 

    display:table; 
    height: 70px; 

} 
#content{ 
    width: 57%; 
    margin: auto; 
    float: left; 
    display:table-cell; 
    vertical-align: middle; 

} 
img{ 
    width: 50px; 
    height: 50px; 
    display:inline-table; 
    vertical-align: middle; 
    margin:1%; 

} 
#headtxt{ 
    font-family; ethno; 
    font-size: 50px; 
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; 
    color: black; 
    display:inline-table; 
    vertical-align: middle; 
    margin-left:10%; 

} 
#socialshare{ 
    float: right; 
    width: 23%; 
    padding: 5px; 
    display:table-cell; 
    vertical-align: middle; 
} 

小提琴

http://jsfiddle.net/w7ba1vyb/8/