How to horizontally center two divs within a header div?

Question

I have a header div that is fixed to the top of the browser window at 100% width. Within the header div there is a div with title text and there is a div with a horizontal list. The horizontal list div should appear to the right of the title text div.

Here is my CSS and HTML:

#header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  background-color:#333333;
  padding:20px;
}

#title {
  float:left;
  color:#000000;
  font-size:30px;
  margin-right:24px;
  background-color:#ffffff;
  padding:8px;
}

#navigation ul {
  padding:0;
  margin:0;
  list-style-type:none;
}

#navigation ul li {
  display:inline;
  margin-right:20px;
  padding:3px;
  background-color:#ffffff;
}

#navigation ul li a {
  color:#000000;
  text-decoration:none;
}

<div id="header">
  <div id="title">Some Title Text</div>
  <div id="navigation"><ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    </ul></div>
</div>

So right now the title and navigation divs are left aligned inside the header div. How can I horizontally center the title and navigation divs?

Edit: Would prefer a solution that doesn't use a hardcoded width(eg. width: 500px) since the list size isn't always the same.

possible duplicate of [Centering floating divs within another div](http://stackoverflow.com/questions/1269245/centering-floating-divs-within-another-div) — Kijewski, Jul 20 '12 at 17:19

Ana · Accepted Answer · 2012-07-20T15:41:01.860

A method that works with changing widths of the header and/ or of the two divs (if the title gets longer or shorter or if navigation items are added or removed):

Set text-align: center on the #header, and display: inline-block on #title and #navigation - demo http://dabblet.com/gist/3151355

Changes in CSS:

#header {
    position:fixed;
    top:0;
    left:0;
    right:0;
    background-color:#333333;
    padding:20px;
    text-align: center; /* added */
}
#title {
    color:#000000;
    font-size:30px;
    margin-right:24px;
    display: inline-block; /* took out float:left and added this */
    background-color:#ffffff;
    padding:8px;
}
#navigation {
    display: inline-block; /* added */
}

I've also added #navigation ul li:last-child {margin-right:0} in order not to have 24px margin after the last list item (which would make it seem like there is more space on the right side of the navigation)

JSW189 · Answer 2 · 2012-07-20T15:29:43.700

2

You can wrap the title and navigation divs in another div, and then center that div using margin: 0 auto.

HTML

<div id="header">
    <div id="center">
        <div id="title">Some Title Text</div>
        <div id="navigation">
            <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

CSS

#center {
    width: 500px; /* or any other width */
    margin: 0 auto;
}

JS Fiddle: http://jsfiddle.net/rJyuJ/

edited Jul 20 '12 at 15:29

answered Jul 20 '12 at 15:24

JSW189

6,267
11
44
72

This won't work if you want to change the width of the menu, or have it dynamically resize. – Jimmy Pitts Jul 20 '12 at 15:32
I don't think this is a good solution because the number of list items isn't always the same. For example if the user is logged in then there might be more items. Is there a way to do it without having to specify `width: 500px`? – Ryan Jul 20 '12 at 15:39
See: http://stackoverflow.com/questions/1269245/centering-floating-divs-within-another-div – JSW189 Jul 20 '12 at 15:44

score 0 · Answer 3 · answered Jul 20 '12 at 15:25

0

hi could you please try with following css for #header

#header {
    position:fixed;
    top:0;
    left:0;
    right:0;
    background-color:#333333;
    padding:20px;
    text-align:center;
}

answered Jul 20 '12 at 15:25

Durgaprasad Budhwani

977
8
18

How to horizontally center two divs within a header div?

3 Answers3

Linked