One of the most commonly asked questions I get about CSS is how to center things. It was really easy when we just used the deprecated
<center> tag. But trying to do it with CSS can sometimes be very frustrating. That's because CSS treats block-level elements differently from inline elements (except <img />, which is a block-level tag, but it centers like an inline tag). In my centering with CSS article, I teach you how to center anything on your page. I even show you how to center things vertically. And if that's not enough, you can learn how to center a document with a fixed width layout and center a document with a liquid layout.
I’d always thought of img tags as inline elements because they don’t create a new line by default, or use the full width of their parent, and you have to use breaks or the css display property with the value of block to force them onto their own line. But on the other hand they do have a width and height and can be floated, so they could be considered inline-block.
As the CSS technique uses absolute positioning with negative margins, if the browser window is smaller than the centered content, it crops it off without giving you scrollbars to access it. I wanted the site to get a long ‘panoramic’ style, but I also didn’t want to exclude users with 800×600 resolution. The fact that some users couldn’t even scroll to see content was a big problem.
As usual, a fantastic post – keep going! I’m saying thanks from the thousands who enjoy your blog and don’t say anything!