Trying to center a div within a container div

Question

Here's my CSS:

#main {
  background: #eae8dc;
  margin: 0 auto;
  width: 790px;
  height: 900px;
  position: relative;
  display: block;
}
#header-container {
  display: inline-block;
  height: 118px;
  width: 648px;
  background: #9ed5de;
  margin: 11px auto;
}

Here's the HTML

<div id="main">
   <header>
     <h1 id="header-container">
     </h1>
   </header>
</div>

This question was helpful in fixing my margin issue, but now I can't seem to center the header container. Why does this CSS margin-top style not work?

score 2 · Accepted Answer · answered Mar 14 '14 at 05:52

2

Text-align should help you center it:

#main {
  background: #eae8dc;
  margin: 0 auto;
  width: 790px;
  height: 900px;
  position: relative;
  display: block;
   text-align: center;
}
#header-container {
  display: inline-block;
  height: 118px;
  width: 648px;
  background: #9ed5de;
  margin: 11px auto;
}

Here's the JS fiddle http://jsfiddle.net/RBkmv/

answered Mar 14 '14 at 05:52

Trent

2,909
1
31
46

CSS is so un-intuitive :(. Thanks, that definitely worked but will it center every element within #main? I'd like to avoid that if possible – natecraft1 Mar 14 '14 at 05:54
Yes it will - If this is not what you want, you'll need to rethink your approach, or rely on a 50% left margin, which is ill advised – Trent Mar 14 '14 at 05:58
What is the canonical or typical way to do organize the html & css in order to achieve this? – natecraft1 Mar 14 '14 at 06:24
I would highly suggestion learning the order of precedence for CSS http://www.alternategateways.com/tutorials/css/css-101/part-four-the-css-order-of-precedence - this is a pretty good page for explaining it. From there, you can form your own ways of doing it. I'm typically hesitant to advice people of "canonical or typical" ways of doing things unless there truly is a right and wrong way to achieve the goal – Trent Mar 14 '14 at 07:57

score 1 · Answer 2 · answered Mar 14 '14 at 05:58

1

This is bad practice. You should style you header element and not your h1 element. See example

#main {
  background: #eae8dc;
  margin: 0 auto;
  width: 790px;
  height: 900px;
  position: relative;
  display: block;
   text-align: center;
}
header {
  display: inline-block;
  height: 118px;
  width: 648px;
  background: #9ed5de;
  margin: 11px auto;
}

This way, your CSS code works.

answered Mar 14 '14 at 05:58

Itay Gal

10,706
6
36
75

Your JSFiddle still has it on the H1 – Trent Mar 14 '14 at 06:02
No, the style is for the header element. – Itay Gal Mar 14 '14 at 06:03

Trying to center a div within a container div

2 Answers2