1

I am having an issue with vertically centering text inside of a DIV using CSS. I have tried the solutions posted in here and I can't seem to get it to work correctly. Any suggestions?

The CSS

#navigation {
   position: fixed;
   width: 100%;
   height: 40px;
   background-color: #333;
   right: 0;
   left: 0;
   margin-right: auto;
   margin-left: auto;
   margin-top: 0px;
   z-index: 999 ! important;
   text-align: center;
   font-family: 'Droid Sans Mono', sans-serif;
   text-transform: uppercase;
   color: #FFF;
   line-height: 40px;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;      
}

The Markup

<div id="navigation"><span><img src="images/nav_logo.png" />&nbsp;<font face="Droid Sans Mono"><a href="http://www.hubblive.com/news/">NEWS</a></font></span></div>

Any information would be great, I am quite the amateur.

Paul Abbott
  • 13
  • 2

1 Answers1

0

Dirty Trick:

CSS:

span {
    vertical-align: baseline;
}

img {
    display: inline-block;
    vertical-align: top;
}

Tested in Chrome.

Daniel Cheung
  • 4,258
  • 1
  • 25
  • 54
  • I just tried the dirty trick. Wasn't dirty enough. Only moved the image up to the top and the text just a pixel or two from the bottom. – Paul Abbott Mar 16 '14 at 01:56
  • edited. please check again – Daniel Cheung Mar 16 '14 at 02:00
  • Still a no go it seems. I am all for a cheap trick though. Is there a reason you are putting the inline-block in an img style? I put the second section inside of my #navigation style. The image actually fits perfectly fine. It's the text mainly. – Paul Abbott Mar 16 '14 at 02:04
  • Maybe you have other styles that overwrite this one. This actually works. http://jsfiddle.net/22yD9/ Please see in Chrome – Daniel Cheung Mar 16 '14 at 02:29
  • 1
    I will have to test it out tomorrow as well and strip the coding because it does work when you do it, haha. I am sorry I can't give you an UP since I don't have a high enough reputation yet (I have 6, but need 15) but I thank you soldiering through and helping me Daniel. Have an awesome evening. – Paul Abbott Mar 16 '14 at 02:31
  • Different time zone bro. Good morning! – Daniel Cheung Mar 16 '14 at 02:33
  • I hope Germany (this is where Cheung came up as an origin surname) is beautiful in the morning for ya then! Cheers! – Paul Abbott Mar 16 '14 at 02:37
  • ... I'm Chinese and I live in Hong Kong... – Daniel Cheung Mar 16 '14 at 02:39