Member Avatar for jevvv

I'm doing our site and the template I used looks nice on my old monitor, because it fits the screen. My new computer has a widescreen monitor and so now I see that the layout of the page has the page based on the left side of the monitor

How do I set it so the page centres in the monitor, whatever size is used? Isn't there a simple line that goes into the css to do this?

You can see it

  • 2 Contributors
  • 2 Replies
  • 71 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by jevvv

Dani AI

Generated

Quick note for (and thanks for the pointer): the usual, reliable way to center a page layout is to give your main wrapper a constrained width and let the browser split the leftover horizontal space. A common typo to watch for is using margins instead of the correct margin property.

Things to check before you tinker further:

  • Make sure the wrapper element actually has a width or max-width set; without that auto margins do nothing.
  • Apply horizontal auto margins to that wrapper (and remove any floats or absolute positioning from it).
  • Confirm your stylesheet is loading and your document has a valid DOCTYPE so browsers behave predictably.
  • For modern layouts you can also center using flexbox on the body/wrapper (display: flex; justify-content: center;) which is handy for variable-width content.
  • Use your browser DevTools to inspect the wrapper’s computed box model — it will show whether margins are being applied or being overridden.

For clear, authoritative references see MDN on margin and the practical roundup at CSS-Tricks: Centering in CSS. If you post the wrapper selector from your CSS I will suggest the exact rule to add.

Member Avatar for zeusofolus

Setting the right and left page margins to auto will typically solve this problem. (this creates a even left and right margin with the remaining empty space left over on a larger monitor)

For example if your html is:

<html>
<body>
<div id="container">
<p>This is your page content</p>
</div>
</body>
</html>

Then your css doc should be

body {
    margins: auto;
}

#container {
    width:760px;
    margins: auto;
}

Hope this helps
Eric

Member Avatar for jevvv

Thanks Eric, I'll try that.

... off to tinker

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.