Center The Content

Now you are going to get that content wrapper centered in the view portal (also known as the browser window). This is easier said than done because of browser compatibility issues. Even though the original intentions of HTML included platform independence, web pages often look completely different in various web browsers. Centering content using CSS is a known compatibly issue with Internet Explorer, Safari, and Firefox.

Let's start with the basics to get things centered for a user with Internet Explorer. Add the following margin tags to the wrapper div definitions:

margin-right: auto;
margin-left: auto;

Now test it out! You may see different results in different browsers! Let's add some markup to make things look similar regardless of the browser and computer!

One trick is to center the body content using text align, then left-align all the content inside the wrapper. Sound confusing? Add the following to your wrapper div:

text-align: left;

Now add the center tag to the body definitions:

text-align: center;

Test out your project in multiple browsers! If you know anyone with an Apple computer, I strongly suggest you use it to test out your web design work! My fiance has one of those machines and when I'm not trying to get it to work like a real computer, I use it to test my work. It often makes me cry.