Centering image and text vertically

Question

I am trying to center some text vertically across all browsers and I am running into issues for some particular reason with this specific case. Please see the Fiddle for the example. I want the word Tester to be centered vertically as well as the image. Thanks for your help.

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>

I believe you may find your answer here: [http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div][1] [1]: http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div — N13Design, Oct 30 '14 at 01:59

score 1 · Accepted Answer · answered Oct 30 '14 at 01:55

Well there is a lot of stuff there. I did remove a few things without, I think, any visual impact. I ended up with :

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

Have a look at the fiddle.

Centering image and text vertically

1 Answers1