Stanislas Piotrowski
Stanislas Piotrowski

Reputation: 2694

center ul inside my div

I would like to center my ul container inside my div.

So my div has got a width of 100% and margin set to auto.

For the ul It has a width of 98% and a margin set to auto

width: 98%;
margin: auto;
display: inline-block;
vertical-align: middle;

The trouble I'm having is that the li are not centered inside so the menu is aligned to the left. I would like to display it in the center position

Anykind of help will be much appreciated.

Below is the url of my website http://www.barbarian-strongman28.fr/

Upvotes: 0

Views: 994

Answers (2)

Marc Audet
Marc Audet

Reputation: 46785

The relevant HTML is the following:

<div class="art-nav-inner">
  <ul class="art-hmenu">
    <li> <a href="accueil.html" class="active"> accueil</a> </li>
    <li> <a href="calendrier-et-resultats.html" class="active"> 
           calendrier et résultats</a> </li>
    <li> <a href="multimedia.html" class="active"> multimedia</a> </li>
    <li> <a href="athletes.html" class="active"> athlètes</a> </li>
    <li> <a href="partenaires.html" class="active"> partenaires</a> </li>
    <li> <a href="contact.html" class="active"> contact</a> </li>
    <li> <a href="media-presse.html" class="active"> médias et presse</a> </li>
  </ul>
</div>

To center the navigation links, add/modify the following CSS rules:

ul.art-hmenu
{
    text-align: center;
}

ul.art-hmenu li
{
    display: inline-block; /* float: left; no need to float the items */
}

When displayed as inline-blocks, the li elements can be centered within the parent element using text-align: center.

Upvotes: 1

miguel-svq
miguel-svq

Reputation: 2176

ul.art-hmenu have float, remove it (float:none) and text-align:center in .desktop-nav .art-nav-inner (and either need the 98% width)

This make the whole ul behave like a single word (cause it's display: inline-block).... and align to the center (as text).

Upvotes: 1

Related Questions