How Do I Center HTML Page

Question

DSLKeper 0 Newbie Poster

14 Years Ago

I am new to code writing. How do I make it so this page stays centered in web browsers? What HTML code do I add and where?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Direct Selling Rumors & Gossip</title>
</head>
<body bgcolor="066082">
<TABLE align="center" class="" style="BACKGROUND-IMAGE: url()" height="1067" width="1916">
<TBODY>
<TR>

</div></TD></TR></TBODY></TABLE>
</body>
</html>

html-css user-interface

4 Contributors
8 Replies
518 Views
8 Years Discussion Span
Latest Post 6 Years Ago Latest Post by Purvi_1

Dani AI

Generated 10 Months Ago

Quick diagnosis (from the posted code): the layout is built with a very wide, fixed table (1916px) and a large background image. That forces horizontal scrolling on smaller viewports so the visible area can look "pushed right." Also the page uses bgcolor="066082" (missing the leading #) which can be ignored by browsers — use CSS instead. 's <center> will sometimes "fix" appearance but is deprecated; was right to push CSS-based centering and moving the background out of the table.

A modern, reliable approach is to use a centered wrapper with a flexible width (max-width) and auto left/right margins, and let the background scale with background-size. Add a viewport meta tag for mobile. Example structure (replace the image path with your file):

<meta name="viewport" content="width=device-width, initial-scale=1">

<body style="background-color:#066082;">
  <div class="page-wrapper">
    <!-- page content goes here -->
  </div>
</body>

<style>
.page-wrapper {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  background-image: url('images/your-background.jpg');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain; /* use "cover" if you prefer filling/cropping */
}
</style>

If you must keep the table temporarily: remove the fixed pixel width/height, give it a responsive width (e.g., width:100% with a max-width), and use background-size so the image scales instead of forcing scrollbars. Also fix any unbalanced tags (your <center>/table placement looked malformed) and prefer background-color:#066082 to bgcolor.

Troubleshooting tips: validate the HTML, test in the browser's responsive/dev tools to see where overflow is coming from, and consider replacing table layout with semantic containers (header, main, footer) when you have time — that will make centering and responsive behavior much easier.

All 8 Replies

rv1990 6 Junior Poster in Training

14 Years Ago

It is a problem in Opera browser where align attribute don't work, instead you can use <center> tag which can solve the problem of centering.

<center><TABLE align="center" class="" style="BACKGROUND-IMAGE: url()" height="1067" width="1916"></center>

Dandello 8 Posting Whiz in Training

14 Years Ago

Both

<center>

and

align="center"

have been depreciated in the newer html versions.
Go with :

<table style="margin:0 auto; text-align:center;"

It's valid to html5.

Okay - posted then saw the reply. What you have is a background graphic in a table. Add

; background-repeat:no-repeat; background-position:top center

after the background-image in the table style. However, fixing the table height and width will keep the table from shrinking and expanding. Go with percentages with a fixed min-width like:

<table style="margin:0 auto; text-align:center; width:100%; min-width:800px; background-image: url(); background-repeat:no-repeat; background-position:top center"

OR take the background graphic out of the table and make it the background of the body.

Edited 14 Years Ago by Dandello because: n/a

Reply to this topic

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.

DSLKeper 0 Newbie Poster · Answer 1 · 2011-10-22T07:28:09+00:00

DSLKeper 0 Newbie Poster

14 Years Ago

Thanks! I'll give it a try.

DSLKeper 0 Newbie Poster · Answer 2 · 2011-10-22T07:42:23+00:00

I didn't get what I was looking for. This is the page that I'm trying to center when it opens in a browser. It keeps justifying to the right. I want it to open in the center and stay centered when the page is being closed by being pulling left to right

with this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Direct Selling Rumors & Gossip</title>
</head>
<body bgcolor="066082">
<center><TABLE align="center" class="" style="BACKGROUND-IMAGE: url()" height="1067" width="1916"></center>
<TBODY>
<TR>

</div></TD></TR></TBODY></TABLE>
</body>
</html>

Any thoughts?

DSLKeper 0 Newbie Poster · Answer 3 · 2011-10-22T07:52:06+00:00

This is all new to me. Can you tell where in the code do I put...
<table style="margin:0 auto; text-align:center; height:1067px; width:1916px"

What should the new code look like?

Below is my current code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Direct Selling Rumors & Gossip</title>
</head>
<body bgcolor="066082">
<center><TABLE align="center" class="" style="BACKGROUND-IMAGE: url()" height="1067" width="1916"></center>
<TBODY>
<TR>

</div></TD></TR></TBODY></TABLE>
</body>
</html>

Thanks for your help.

Dandello 8 Posting Whiz in Training · Answer 4 · 2011-10-22T08:04:38+00:00

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Direct Selling Rumors & Gossip</title>
</head>
<body style="background-color:#066082">
<table style="margin:0 auto; text-align:center; width:100%; min-width:800px; background-image: url(); background-repeat:no-repeat; background-position:top center">
<TBODY>
<TR><td>


</TD></TR></TBODY></TABLE>
</body>
</html>

or

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Direct Selling Rumors &mp; Gossip</title>
</head>
<body style="background:#066082 url(); background-repeat:no-repeat; background-position:top center;">
<table style="margin:0 auto; text-align:center; width:100%; min-width:800px;">
<TBODY>
<TR><td>


</TD></TR></TBODY></TABLE>
</body>
</html>

One of these should get you close.

DSLKeper 0 Newbie Poster · Answer 5 · 2011-10-22T09:12:51+00:00

You all have been fantastic! I am glad I found this community.

Purvi_1 -12 Light Poster Banned · Answer 6 · 2019-12-09T04:54:52+00:00

Please refer following links :

https://html.com/tags/center/
https://www.w3schools.com/howto/howto_css_center_website.asp

How Do I Center HTML Page

Dani AI

Recommended Answers Collapse Answers

All 8 Replies

Recommended Answers