CODEWITHSUNDEEP
htmlcsscenter
Black Bird
Black Bird

Reputation: 797

Centered Menu w/ CSS

jsFiddle

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;
}

Upvotes: 0

Views: 112

Answers (3)

Casey Dwayne
Casey Dwayne

Reputation: 2169

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.

Upvotes: 1

lngs
lngs

Reputation: 698

set ul to display:inline-block;

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

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

Upvotes: 1

What have you tried
What have you tried

Reputation: 11138

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

Working fiddle:

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

Upvotes: 3

Related Questions