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

【问题标题】：Vertical Align not working on all screen resolutions垂直对齐不适用于所有屏幕分辨率
【发布时间】：2014-10-30 20:34:52
【问题描述】：

我有以下代码和 JS Fiddle，可以在所有浏览器上垂直对齐文本和图像。但是，在某些屏幕分辨率上，它会将标题文本“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>
	</div>

</div>

【问题讨论】：

vertical:align 不会在它所应用的元素中对齐元素。它适用于同一容器中的元素。
我想通了，只需要添加 line-height: 50px;到文本。

标签： html css vertical-alignment

【解决方案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/

【讨论】：