Wednesday, September 22, 2010

Keep It Centered - Tutorial

How do you keep something centered in the browser window regardless of the size of the window? It is actually a quick and easy function using a div style. First off, I'm going to insert an image that I want to have on my webpage.

You can
see the highlighted section showing where I inserted the image.

Once the image is inserted it is automatically left-aligned when it is pulled up in the web browser.
The easy fix to this is adding two div style functions to the image. The functions are the width and the margin. The coding looks like this div style="width: XXpx; margin: 0 auto;". This part is placed right before your image, and the image is followed by /div. The last thing you need for this is to enter the width size for your image. An easy way to find this is to just right click on the image file and choose "Get Info."
Now when you you open it up in the browser the image stays centered no matter the size of the window.

No comments:

Post a Comment