Центрирование изображения и текста по вертикали

Question

Я пытаюсь центрировать некоторый текст по вертикали во всех браузерах, и я сталкиваюсь с проблемами по определенной причине в этом конкретном случае. Для примера см. Скрипт. Я хочу, чтобы слово «Тестер» было центрировано по вертикали, а также изображение. Спасибо за вашу помощь.

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.