2

I'm not able to align a menu, contained within a ul, to the horizontal center of its container. how to do that?

See a live demo of the menu on jsFiddle.

<li><a href="aboutus.php">AboutUs</a>
    <ul class="sub">
        <li><a href="aboutsquare.php">About Square Innovations</a></li>
        <li><a href="ourvision.php">Our Vision</a></li>
        <li><a href="ourmission.php">Our Mission</a></li>
        <li><a href="trainerprofiles.php">Trainer Profiles</a></li>
        <li><a href="funclass.php">Fun In Our ClassRooms</a></li>
    </ul>
</li>

3 Answers 3

7

You can address the ul element as an inline-level element within the page flow, while retaining its block-level characteristics (using the inline-block display value) — after applying this, it can be simply aligned within its container like any inline-level element, using text-align.

To implement this, add the following rules:

#container {
    text-align: center;
}
ul {
    display: inline-block;
}

Here's the updated demo.

Reference


Disclaimer: Support for inline-block is somewhat limited nope! it's actually very wide by now, see the compatibility table on caniuse.com.

4

There is a very neath, fully cross-browser and dynamic 'trick' to achieve this, as long as the menu stays on one line. It is very well explained here: http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

The inline-block often suggested for this problem is not very well supported in legacy browsers in my experience. To be honest, I never use it. I always go for the clever method that Matthew James Taylor describes.

Edit: As requested I will briefly describe the technique. Your html should look like a normal list of links, with an extra wrapping div around it. Something like this:

<div class="menu-wrapper">
  <ul>
    <li><a ...>link</a></li>
    <li><a ...>link</a></li>
    <li><a ...>link</a></li>
  </ul>
</div>

Now the rest is css work. The steps are as follows:

  • Float the wrapper to the left and give it a width of 100% to make it take up the full viewport width
  • Float both the ul and the li to the left and don't give them any width to make them adjust to their content.
  • Give the ul a position: relative of left: 50%. This will make it's left edge move to the center of it's parent, and this means the center of the viewport.
  • Finally you should give your li a position: relative of left: -50%. This will make them move past the left edge of the parent ul and makes the center of the list of li's line up with the left edge of the parent ul. Since we made that edge the center of our viewport in the previous step, the menu is now effectively centered.

As I said before, all credits to Matthew James Taylor, and definitly check out his thorough explanation. The drawings he made make it much easier to understand.

edit
As requested I set up a little fiddle to demonstrate the technique: http://jsfiddle.net/fDmCQ/

4
  • you are, of course, correct. (older) IE will have trouble rendering inline-block elements. this is a great article, please describe the underlying logic or encompass the highlights within your answer to make it self contained. Jan 24, 2013 at 21:56
  • @Eliran glad you like it. I took your suggestion and improved my answer. And I look forward to day we do no longer have to support old IE versions (or no IE at all if it where up to me)! ;-)
    – Pevara
    Jan 24, 2013 at 22:32
  • Can you please provide me a fiddle formy example ?? Jan 25, 2013 at 2:54
  • 1
    @krishna I tried to make a fiddle on my iPad (which I do not recommend) and put the link in my answer. Feel free to ask if you want any further explanation!
    – Pevara
    Jan 25, 2013 at 21:23
1

Change the margin on the <ul> to 0 auto and give it a width (~575px or larger).

jsFiddle example

 ul {
     font-family: Arial, Verdana;
     font-size: 14px;
     margin: 0 auto;
     padding: 0;
     width:600px;
     list-style: none;
     text-align: center;
 }
2
  • this requires the addition of an explicit width to the ul element, making it rigid. what if you add more list items? Jan 24, 2013 at 21:04
  • What's with the down vote? Is this answer somehow not useful or incorrect?
    – j08691
    Jan 24, 2013 at 23:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.