Horizontal css menu question

Question

I have a simple ul horizontal menu that exists within a div that is set to 10% height and 100% width. How does one center text horizontally and vertically within it?

#navlistcontainer {
    position:fixed;
    height:10%;
    bottom:0px;
    left:0px;
    right:0px;
}
#navlist li {
    display: inline;
    list-style-type: none;
}
#navlist li a {
    color:#FFF;
}

  <div id="navcontainer">
    <ul id="navlist">
        <li><a href="index.html">START</a></li>
    </ul>
  </div>

Bazzz · Accepted Answer · 2011-03-15 21:41:56Z

1

try this:

#navlist {
 text-align: center;
 display: block;
}

#navlist li {
 display: inline;
}

For vertical alignment you'd need to set the line-height of navlistcontainer equal to it's height. I'm not sure it will work with height in percentage. Consider this:

#navlistcontainer {
 height: 50px;
 line-height: 50px;
}

Here is a jsFiddle: http://jsfiddle.net/FH9sZ/

answered Mar 15, 2011 at 21:41

Bazzz

27k12 gold badges55 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

methyl · Accepted Answer · 2011-03-15 21:43:26Z

0

You shouldn't define height as precentage. http://jsfiddle.net/zzdGx/ there you go fiddle for this.

answered Mar 15, 2011 at 21:43

methyl

3,3322 gold badges27 silver badges34 bronze badges

Collectives™ on Stack Overflow

Horizontal css menu question

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related