2

Can someone help me vertically center text inside a div, consistently across browsers. In IE9 ONLY, text is one pixel closer to the top of the parent div. All other browsers render the text as expected.

Important: I'm using standards-mode:

<!DOCTYPE html>

Here's some example HTML:

<!DOCTYPE html>
<div style="width:100px; height:16px; font-size:13px; font-family:Arial; line-height:1.2; background-color:red; color:White; vertical-align:middle">
<div style="line-height:16px">XXXXXXXXXX</div></div>
Peralta
  • 61
  • 1
  • 4

3 Answers3

2

Bit late to the party. However, I came across a similar issue recently. After some digging about I came across this article: Sub-pixel Fonts in IE9.

I think this is directly responsible for the issues of font vertical alignment in IE9. Unfortunately there doesn't seem to be a fix as this is a forced option or customisable by the user (not likely to happen).

So it looks like the only solution is to increase the line-height as mentioned previously.

Peter Lang
  • 54,264
  • 27
  • 148
  • 161
Oldie
  • 109
  • 7
1

You might want to look at the following:

CSS: Standard (dynamic) way to centralize an element in the y-axis

There are some useful references that will probably still apply to IE9.

Based on your code: you are setting the line-height in more than one place. Try removing the line-height:16px property in your inner div, in fact, get rid of the inner div since vertical-align will only affect inline elements.

Also, make sure your container height is big enough to hold the text (1.2*13) otherwise you may get into issues related to different fonts or different default font-sizes across browsers.

Probably what is happening is that 1.2*13 = 15.6, and depending how the browser rounds off floating point numbers, that could account for a 1 pixel shift. Set line-height to 16px instead of 1.2 and see if that works.

Second Try:

.outer {
    background-color: red;
    color: white;
    width: 100px;
    height: auto;
    padding-top: 0px;
    font-family: Arial, sans-serf;
    font-size: 13px;
    line-height: 5.0;
}

applied to: 

<div class="outer">XXXXXXXXXX</div>

If anything will fix this, make the line-height large enough so that there is some space above/below the lettering. Set the container height to auto and let the line-height control the height of the container.

Community
  • 1
  • 1
Marc Audet
  • 46,011
  • 11
  • 63
  • 83
  • Try the above code in IE9 and then in another browser. Making the changes you suggested do not have any effect on the issue I have raised. I'd post images, but stackoverflow will not let me. Changing the doctype gives expected results, but nothing else. And i dont want to change the doctype for the site. – Peralta Mar 24 '11 at 19:32
  • Are you on a Mac or PC? The doctype is good, gives you strict mode, so keep it that way. Are you using any css reset script? – Marc Audet Mar 24 '11 at 19:34
  • PC. There is no CSS on the page other than what I've provided. – Peralta Mar 24 '11 at 19:38
  • Try the following fiddle and let me know how it works in IE9 http://jsfiddle.net/audetwebdesign/pdKHP/ – Marc Audet Mar 24 '11 at 19:47
  • Same thing. I also changed your css to use a line-height of 16px and the same problem exists. Looks great in everything except IE 9. – Peralta Mar 24 '11 at 20:16
  • So the problem exists regardless of the value of line-height? – Marc Audet Mar 24 '11 at 20:24
  • I am stumped! IE9 is probably calculating the line-height slightly differently than the other browsers, could be a bug. And you said it looks ok in IE8? – Marc Audet Mar 24 '11 at 20:35
  • That is it for now, sorry could not crack this one, good luck! – Marc Audet Mar 24 '11 at 20:57
0

There is an answer to this question here:

http://www.sitepoint.com/forums/css-53/text-alignment-w-ie9-standards-mode-745359.html

I had the same problem with the 1px off text rendering, and it would only appear with font size 13px in IE9.

adding the css style

    {
      height: 16px;
      line-height:16.99px;
    }

to the surrounding div fixed the problem for me on IE7-9, FF and Chrome on Windows.

Twilite
  • 873
  • 9
  • 22