Reputation: 2694
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
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
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