Ho bisogno di centrare un menu orizzontale.
Ho provato varie soluzioni, incluso il mix di inline-block
/ block
/ center-align
ecc.
Ecco il mio codice:
<div class="topmenu-design">
<!-- Top menu content: START -->
<ul id="topmenu firstlevel">
<li class="firstli" id="node_id_64"><div><a href="#"><span>Om kampanjen</span></a></div></li>
<li id="node_id_65"><div><a href="#"><span>Fakta om inneklima</span></a></div></li>
<li class="lastli" id="node_id_66"><div><a href="#"><span>Statistikk</span></a></div></li>
</ul>
<!-- Top menu content: END -->
</div>
AGGIORNAMENTO
So come allineare al centro il ul
all'interno del div
. Questo può essere realizzato usando il suggerimento di Sarfraz.
Ma gli elementi dell'elenco sono ancora fluttuati a sinistra all'interno del ul
.
Ho bisogno di Javascript per realizzare questo?
Questo funziona per me. Se non ho frainteso la tua domanda, potresti fare una prova.
div#centerDiv {
width: 100%;
text-align: center;
border: 1px solid red;
}
ul.centerUL {
margin: 2px auto;
line-height: 1.4;
padding-left: 0;
}
.centerUL li {
display: inline;
text-align: center;
}
<div id="centerDiv">
<ul class="centerUL">
<li><a href="http://www.amazon.com">Amazon 1</a> </li>
<li><a href="http://www.amazon.com">Amazon 2</a> </li>
<li><a href="http://www.amazon.com">Amazon 3</a></li>
</ul>
</div>
Fate così:
<div id="footer">
<ul>
<li><a href="/1.html">Link 1</a></li>
<li><a href="/2.html">Link 2</a></li>
<li><a href="/3.html">Link 3</a></li>
<li><a href="/4.html">Link 4</a></li>
<li><a href="/5.html">Link 5</a></li>
</ul>
</div>
E il CSS:
#footer {
background-color:#ccc;
height:39px;
line-height:36px;
margin:0 auto;
text-align:center;
width:950px;
}
#footer ul li {
display:inline;
font-family:Arial,sans-serif;
font-size:1em;
padding:0 2px;
text-decoration:none;
}