垂直对齐不适用于所有屏幕分辨率
问题描述:
我有下面的代码和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>
答
试试这个
#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;
}
小提琴
+0
它不起作用,但感谢您的努力。 – Steven 2014-10-30 13:31:38
'vertical:align'不对齐要应用到的元素中的元素。它适用于同一容器内的元素。 – 2014-10-30 12:30:15
我想通了,只需要添加line-height:50px;到文本。 – Steven 2014-10-30 15:17:54