Member Avatar for veledrom

Hi,

I want to align this layout in the middle of the web page. How can I do it? I don't want to use table.

Thanks in advance

<html>
<head></head>
<body>
<div id="container">
    <div id="header">Header bits go here</div>
    <div id="content">Content bits go here</div>
    <div id="footer">Footer bits go here</div>
</div>
</body>
</html>
  • 6 Contributors
  • 10 Replies
  • 305 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by digital29

Dani AI

Generated

Quick diagnosis and context: setting a fixed width alone won’t center a block — it simply gives the element a narrower box that still sits at the left because its horizontal margins default to zero. and used legacy HTML attributes/tags that will work in old browsers, but those are deprecated. correctly pointed out that text-align affects inline content only. The classic margin-based centering (as mentioned by ) is fine; below are modern, robust alternatives that work responsively and avoid deprecated markup.

Modern, simple horizontal centering (flexbox)

/* put this on the parent (body or a wrapper) */
html, body { height: 100%; margin: 0; }
body {
  display: flex;
  justify-content: center; /* centers horizontally */
}
/* container can be fixed or responsive */
#container { max-width: 900px; width: 90%; }

Center both axes (grid)

html, body { height: 100%; margin: 0; }
body {
  display: grid;
  place-items: center; /* centers horizontally and vertically */
}
#container { width: 700px; max-width: 95vw; }

Other useful patterns

  • Absolute/transform centering for positioned layouts:
#container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
}
  • If child elements are floated, add a clearfix so the parent keeps its height:
#container::after {
  content: "";
  display: table;
  clear: both;
}

Troubleshooting checklist: ensure a standards DOCTYPE (e.g. <!DOCTYPE html>), remove default body margins, confirm the element is not floating (or use the clearfix), and prefer max-width for responsive layouts. For wide legacy support use the classic margin-based approach as a fallback; for modern layouts prefer flexbox/grid for simplicity and control. This complements the points already raised by and while avoiding deprecated attributes mentioned by and .

Recommended Answers

All 10 Replies

Member Avatar for urtrivedi 
<html>
<head></head>
<body>

<div id="container" >
    <div id="header" align="center">Header bits go here</div>
    <div id="content" align="center">Content bits go here
    <div id="footer" align="center">Footer bits go here</div>
</div>
</body>
</html>
Edited by urtrivedi because: n/a
Member Avatar for veledrom

Thanks for prompt answer.

When I set width, it moves to left.

<html>
<head></head>
<body>
 
<div id="container" style="width:500px">
    <div id="header" style="background-color:#CCDDEE">
      <div align="center">Header bits go here</div>
    </div>
    <div id="content" style="background-color:#CCCCCC">
      <div align="center">Content bits go here</div>
    </div>
    <div id="footer" style="background-color:#997755">
      <div align="center">Footer bits go here</div>
    </div>
</div>
</body>
</html>
Member Avatar for urtrivedi

if you still want it in middle then you must set width to 100%

<style="width:100%">

Member Avatar for veledrom

I've seen it somewhere but I cannot find it where it was. I don't want it to cover whole screen.

Member Avatar for MidiMagic

It depends on the content. Use these styles

Use

text-align: center;

for text. That is the only thing the W3C allows centering of.

To center a photo, use

clear: both; text-align: center:

. The last style is to make it work with IE.

To center something else, use

margin-left: auto; margin-right: auto; text-align: center;

. Again, the last makes it work with IE, which for some reason wants both.

Edited by MidiMagic because: n/a
Member Avatar for Member #334542 
<html> 
<head> 
<title> 
DEMA.COM 
</title> 
<style> 
body { 
background-color:black; 
font-family:terminal; 
color:#2D5B89; 
text-align: center; 
} 
#page { 
width:750px; 
height:400px; 
text-align: left; 
} 
</style> 
</head> 
<body> 

<div id="page"> 

<img src="menubar.gif" border="0"/> 
This is the page contents. 

</div> 
</body> 
</html>
Member Avatar for Rajib Ganguly

Another option is to make in center by CSS, but before that be sure that the page is xhtml1.0
code is : margin:0 auto;

hope it will help.

Member Avatar for Member #334542

Hi veledrom,

I hope you got the result. If yes, mark it as solved.

Member Avatar for veledrom

It has been solved with rajarajn07's example. Thanks

Also, thanks for all who has contributed.

Member Avatar for digital29

try <center> and after </center> in html
strange and old, but it works

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.