Posted on Leave a comment

CSS : Center your page (The better way)

I previously had a post showing how to completely center a page, which works, however if the browser becomes too narrow then the page’s far left side becomes hidden as the center of the page continues to take precedence. (Also the previous post would explain how to also center vertically as WELL as horizontally)

Use this instead, besides, its less div’s and quicker:

BODY {
text-align:center;
}

/* Set left & right margins ‘auto’ keeps .content in the center of the screen */
/* Left aligns .content text (otherwise it would follow suit and be centered) */
/* Set desired width (I use 775 so fits on 800*600 with scrollbar) */

.content {
margin:0px auto;
text-align:left;
width:775px;
}

And the html code as follows:

<div class=”content”>
This is my content. Everything inside these tags will be constrained within the 775px boundary however it will adjust depending on the width of the screen to always be centered
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.