Member Avatar for Griffin54

Hello;
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?
Thanks.

  • 7 Contributors
  • 6 Replies
  • 238 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by lps
Member Avatar for JorgeM

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
  </div>
</div>

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

Member Avatar for Alaister

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.

Member Avatar for shahbaz13

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

<div algin="center">
<div>Your Main Content</div>
</div>
Member Avatar for gabrielcastillo

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;}
Member Avatar for lps

<!DOCTYPE html>
<html>
<head><style>body{width:1000px;margin:auto;}</style></head>
<body>
<p>something goes here</p>
</body>
</html>

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.