Necesito centrar un menú horizontal.
He probado varias soluciones, incluyendo la mezcla de inline-block
/ block
/ center-align
etc., pero no lo he conseguido.
Aquí está mi código:
<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>
ACTUALIZACIÓN
Sé cómo alinear al centro el ul
dentro del div
. Eso se puede lograr con la sugerencia de Sarfraz.
Pero los elementos de la lista siguen flotando a la izquierda dentro del ul
.
¿Necesito Javascript para lograr esto?
Esto me funciona. Si no he malinterpretado tu pregunta, podrías probarlo.
Comienza el snippet: js hide: false -->
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>
...fin del fragmento..;
Hazlo así:
<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>
Y el 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;
}