DEV Community

Discussion on: Bullseye! 4 ways to center that damn div with CSS

View post
Collapse
 
merri profile image
Vesa Piittinen •

You could improve the example by using an image or a child element that has display: inline-block with a set width and height. This being said you're missing a few things with the line-height trick:

  1. You should set the parent's line-height, not the child's.
  2. You should restore normal line-height to the child.
  3. You also need to use vertical-align: middle on the child.
  4. Due to cross-browser inconsistencies the line-height has to be slightly smaller than the true height, 197px or 198px (if you want to avoid child being 1 or 2px too low on some browsers).

It is very hard to get it just right cross-browser, which is also why most people just use flexbox and be done with it :) In the past I've written solutions for displaying centered images cross-browser all the way from IE6 to whatever was the latest Firefox, Chrome, IE, Opera and Safari with just CSS and it was awful to master, although also both challenging and interesting, which I like. Each of those browsers had their own unique rendering engine back then! And with IE6 and IE7 you had to use display: inline and trigger "hasLayout" mechanism to get a behavior that matched inline-block... stuff you really don't want to learn unless you like mental torture of complexity :)

Collapse
 
vtrpldn profile image
Vitor Paladini • • Edited

Hey Vesa, great addition, thanks!

I really love that nowadays we don't have as much cross-browser problems that we had back in the IE6 era. I don't remember ever using the "hasLayout" trick but sure enough I've written a few browser specific stylesheets in the past. I don't miss those times 😄

Collapse
 
merri profile image
Vesa Piittinen •

Just for the sake of completeness, I think this is what one had to write when also avoiding browser specific stylesheets:

.parent {
    height: 200px;
    line-height: 197px;
    text-align: center;
    width: 200px;
}

/* probably has to be given to a "natural" inline HTML element */
.child {
     display: inline;
     zoom: 1;
     display: inline-block;
     height: 100px;
     line-height: normal;
     text-align: left;
     vertical-align: middle;
     width: 100px;
}

The hasLayout stuff was undocumented feature based on old layout engine for Windows applications. When CSS was added into IE they just continued to use the old layout engine despite it being not compatible with CSS. The way they worked around issues was to link some particular HTML elements and CSS properties that would trigger hasLayout internally to mimick CSS behavior as well as they could, but that would ultimately not work that well as can be seen by the amount of issues IE continued to have during the entirety of it's lifespan. I guess this is a good enough summary that doesn't lie too much :)

It was impossible to learn CSS by using IE6, there were simply so many times the browser didn't follow what was written in the standards. I learned CSS when Firefox was released: for the most part it did exactly what was written in the standards, and you would get the results you expect when expirementing. With IE you'd continuously find inconsistencies, because you either didn't trigger hasLayout or you triggered it accidentally by using "wrong" HTML element or CSS property. It was nice to find info on hasLayout some ten years ago somewhere on the web, it was enough so that I could start writing stylesheets where all CSS was in one place instead of having browser specific ones.

Now the only problem is that I still remember how to work with these legacy browsers and nobody needs the knowledge anymore :D