I am working on a web page that I have designed to take up 75% of the monitor.
Presently this web page when loaded auto aligns to the left side of my monitor.
While it looks fine I would prefer it to be centered on my monitor. I have tried writing a code that will center my web page but am having no luck.
I'm sure that it is a simple fix but I can't seem to get it to work.
Anyone out there know what code I should use to center my web page?

Recommended Answers

All 6 Replies

Have you tried margin: auto; on your outer div?

Create two divs, outer and inner div. The inner div goes inside of the outer div...

<div class="outerDiv">
  <div class="innerDiv">
    your main content

.outerDiv {width:75%;margin:auto;}
.innerDiv {style as you would normally for your content}

Enclose the body of your page within a DIV tag. Since the goal is to center the entire web page, this should be just about everything within the BODY tag. Place the <DIV> tag immediately after the <BODY> tag and put the closing </DIV> tag just before the </BODY> closing tag.

Put that dic inside a another div and set the outside div align to center. Like

<div algin="center">
<div>Your Main Content</div>

Here is what i do:

<div class="wrapper">
    <div class="main-content">
        <h2>Hello World</h2>
    </div><!--end of main content -->
</div><!-- end of wrapper -->

/*CSS Styles*/
.wrapper {background:#fff; boder:1px solid #ddd; margin:0 auto; padding:0 20px width:1024px;}

<!DOCTYPE html>
<p>something goes here</p>

BUT if an element is having position absolute, it should have additional style "left:0;right:0;" in order to have it positioned to center.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.