CSS中心对齐ul列表

Question

I have a <ul> list on my website that contains some sub menus. It is structured in this way:

<div id="cssmenu">
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>RNG</span></a>
      <ul>
         <li><a href='#'><span>menu 1</span></a></li>
         <li><a href='#'><span>menu 1</span></a></li>
         <li class='last'><a href='#'><span>menu 1</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Altro</span></a>
      <ul>
         <li><a href='#'><span>kldajofa</span></a></li>
         <li class='last'><a href='#'><span>Altro12</span></a></li>
      </ul>
   </li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

I have 4 <li> as you can see and I'd like to see them center-aligned with the width of the screen, but I don't know how to do it.

You can see a fiddle here that contains the CSS too. How can center align the names I have on my menu?

Answer 1

Assuming there are only 4 li - as in the example, set width:25% .

Working jsFiddle here

#cssmenu li {
    float: left;
    padding: 0px;
    width: 25%;
}

I made a minor update so that the sub-nav menu items are also 25%..

jsFiddle here

There were set to width:225px; .

#cssmenu li ul {
    width: 25%;
}

Answer 2

Considering you have only 4 menu items, you just need to add :

#cssmenu > ul > li { width:25%; }

This will set the width of the list items to 25%. And since the a are set to be displayed as blocks, they will fit the whole width of the li .

Note that we are using the direct child selector > because we don't want this effect to be applied to the menu li s inside the sub-menu. We only need that effect on the root level.

Other possible solution is to use flexbox which isn't well supported yet and cannot be used without polyfill.

Answer 3

If the li are display:inline-block you can apply text-align:center to the ul and the list items will center regardless of the number (provided there is room on the line).

The good news is that there are no clearing issues.

JSFiddle

Answer 4

I've just added width to li and it works now.

Check JsFiddle

#cssmenu li a {
  background: #0D0D0D bottom right no-repeat;
  display: block;
  font-weight: normal;
  line-height: 35px;
  margin: 0px;
  padding: 0px 25px;
  text-align: center;
  text-decoration: none;
    width:70px;
}