css - horizontally - center text in div

CSS text-align: center; no funciona

Question

Tengo el siguiente html:

<div id="footer">
<ul id="menu-utility-navigation" class="links clearfix">
<li class="menu-685 menu-site_map first">Site Map
</li>
<li class="menu-686 menu-privacy_policy">Privacy Policy
</li>
<li class="menu-687 menu-terms___conditions">Terms &amp; Conditions
</li>
<li class="menu-688 menu-contact_us last">Contact Us
</li>
</ul>
</div>

Con el siguiente CSS:

div#footer {
font-size: 10px;
margin: 0 auto;
text-align: center;
width: 700px;
}

Introduje el tamaño de fuente solo para ver si el estilo estaba funcionando (Firebug informa que está funcionando pero quería verlo). Está funcionando. Pero el texto no está centrado en el pie de página en Firefox o en Safari (aún no lo he comprobado en IE).

Lo intenté con y sin margen: 0 auto; y con y sin texto-alinear: centro; Ninguna combinación de esas cosas funcionó.

Aquí está fuera de firebug:

div#footer {
font-size: 10px;
margin: 0 auto;
text-align: center;
width: 700px;
}
Inherited fromdiv#page
#skip-to-nav, #page {
line-height: 1.5em;
}
Inherited frombody.html
body {
color: #666666;
font-family: verdana,arial,sans-serif;
}

¿Ayuda?

Answer 1

No sé si usa alguna versión de Bootstrap, pero la clase auxiliar útil para centrar y bloquear un elemento en el centro es .center-block porque esta clase contiene margin y display propiedades de CSS, pero la clase .text-center solo contiene el text-align propiedad

Bootstrap Helper Class center-block

Answer 2

Para hacer que un elemento de bloque en línea alinee el centro horizontalmente en su padre, agregue text-align:center a su padre.

Answer 3

Si desea que el texto dentro de los elementos de la lista esté centrado, intente:

ul#menu-utility-navigation {
width: 100%;
}
ul#menu-utility-navigation li {
text-align: center;
}

Answer 4

Supongo que desea que todos los elementos estén uno junto al otro, y que todo se centre horizontalmente.

li elementos li se display: block por defecto, ocupando todo el espacio horizontal.

Añadir

div#footer ul li { display: inline }

una vez que hayas hecho eso, probablemente querrás deshacerte de las balas de la lista:

div#footer ul { list-style-type: none; padding: 0px; margin: 0px }