html - 垂直居中图像和文本

Question

我试图在所有浏览器中垂直居中放置一些文本，但由于某些特殊原因，我在这个特定案例中遇到了问题。有关示例，请参阅 fiddle 。我希望 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>

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