Centered Menu w/ CSS

Question

I need to center my fixed header nav that is using an unordered list. The middle list item is left empty as I am putting a background image there in its place.

Right now it "looks" centered though if you rubberband the browser window you can see that it is not. I can achieve almost middle by reducing the width from 960px to ~780px but I don't want to have to do that.

I'm sure I'm overlooking something simple here. Thanks!

HTML:

<header>
    <nav>
        <ul>
            <li><a class="active" href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Services</a></li>
            <li class="logo"></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}


body{
    background-color: #ebebeb;
}

nav {
    width: 960px;
    margin: 0 auto;
}

ul{
    list-style-type: none;
    text-align: center;
}

li{
    display: inline-block;
    height: 120px;
    float: left;
    text-align: center;
    line-height: 120px;
    margin-right: 30px;
}

.logo {
    height: 130px;
    width: 164px;
    background:url(http://samaradionne.com/img/typeBlack.png) no-repeat;
}

section.stretch{
    float: left;
    height: 1500px;
    width: 100%;
}

header{
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #aaaaaa;
    position: fixed;
    z-index: 10;
    text-align: center;
}

header a{
    color: #969696;
    text-decoration: none;
    font-family:  sans-serif;
    text-transform: uppercase;
}

Check out this thread/answer: http://stackoverflow.com/a/8228669/1375372 — Rob Grzyb, Apr 09 '13 at 19:10
I was able to get the header to center by adding "display: inline-block;" to the ul element. — jennyfofenny, Apr 09 '13 at 19:10
and another thread (there must be hundreds) http://stackoverflow.com/a/14511370/1340674 — Pevara, Apr 09 '13 at 19:24

score 3 · Answer 1 · answered Apr 09 '13 at 19:11

3

Add display: inline-block; to the ul and it will properly center

Working fiddle:

http://jsfiddle.net/2GG7Y/12/

answered Apr 09 '13 at 19:11

What have you tried

11,018
4
31
45

FYI - I did not see the above comments when I answered, they were posted at the same time I suppose – What have you tried Apr 09 '13 at 19:13

score 1 · Answer 2 · answered Apr 09 '13 at 19:14

1

set ul to display:inline-block;

ul{
  list-style-type: none;
  text-align: center;
  display:inline-block;
}

demo: http://jsfiddle.net/2GG7Y/10/

answered Apr 09 '13 at 19:14

lngs

690
1
8
17

score 1 · Accepted Answer · answered Apr 09 '13 at 19:14

1

Could also use an inline-table

ul {
  display:inline-table;
}

http://jsfiddle.net/2GG7Y/13/

You could take the CSS table a step further with

li {
  display:table-cell;
}

Though, these elements will work in most browsers, you may want to cross test for fallbacks.

answered Apr 09 '13 at 19:14

Casey Dwayne

2,142
1
17
32

I like that you're working with tables & cells, which I think would allow me to use vertical-align also would it not? Ideally I'd like to remove the line-height to the li so that it centers vertically with the logo. – Black Bird Apr 09 '13 at 19:22
If you wanted to do that you could just nix the `ul` display style and go with `display:inline-block` on your `li` style. I would move the image outside of the `ul` as an actual `img` myself, just to be on the safe side. If (for some awful reason CSS was disabled or not loading), your logo would still show. Plus it's readable content for SEO. `alt` text for the win. – Casey Dwayne Apr 09 '13 at 19:36
Check out this fiddle. It also uses responsive widths so you're not stuck with a 960px block of content. http://jsfiddle.net/2GG7Y/16/ – Casey Dwayne Apr 09 '13 at 19:43

Centered Menu w/ CSS

3 Answers3