垂直居中图像和文本

时间:2014-10-30 01:13:42

标签: html css text-align

我试图在所有浏览器中垂直居中一些文本,并且由于某些特殊原因我遇到了问题。有关示例,请参阅小提琴。我希望Tester这个词在垂直方向和图像中心。谢谢你的帮助。

http://jsfiddle.net/56jxjq69/2/

<div id="heading" style="margin: auto; display: block;">
<a href="http://www.sss.com"><img src="images/newlogo200x200.png" style="width: 50px;
height: 50px;
position: absolute;
margin-left: 2.5%;
margin-top: .5%;"/></a>
<div id="header" style="margin: 0 auto;
padding: 5px 0 0 0 !important;
width: 100% !important;
clear: both; 
background-color: black;
color: white;
vertical-align: middle;
height: 70px;">

<span id="headtxt" style="font-family: ethno;
max-height: 80px;
font-size: 50px;
width: 65%;
padding: 0;
display: block;
margin: auto;
line-height: 55px; vertical-align: middle;text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
color: black;">
TESTER</span>

</div></div>

1 个答案:

答案 0 :(得分:1)

那里有很多东西。我认为,在没有任何视觉影响的情况下,我确实删除了一些内容。我最终得到了:

<div id="heading" style="margin: auto; display: block;">
  <div id="header" style="padding: 5px 0 0 0 !important;width: 100% !important;background-color: black;color: white;vertical-align: middle;height: 70px;">
    <div style="text-align:center;">
      <a href="http://www.sss.com">
        <img src="images/newlogo200x200.png" style="position:relative;top:8px;width: 50px;height: 50px;"/>
      </a>
      <span id="headtxt" style="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;">
        TESTER
      </span>
    </div>
  </div>
</div>

查看fiddle