¿Cómo puedo centrar <ul> <li> en div

¿Cómo puedo centrar una lista desordenada de <li>en un ancho fijo div?

<table width="100%">
  <tbody>
  <tr>
    <td width="41%"><img src="/web/20100104192317im_/http://www.studioteknik.com/html2/html/images/hors-service.jpg" width="400" height="424"></td>
    <td width="59%"><p align="left">&nbsp;</p>
      <h1 align="left">StudioTeknik.com</h1>
      <p><br align="left">
        <strong>Marc-André Ménard</strong></p>
      <ul>
        <li>Photographie digitale</li>
        <li>Infographie </li>
        <li>Débug et IT (MAC et PC)</li>
        <li> Retouche </li>
        <li>Site internet</li>
        <li>Graphisme</li>
      </ul>
      <p align="left"><span class="style1"><strong>Cellulaire en suisse : </strong></span><a href="#">+41 079 573 48 99</a></p>
      <p align="left"><strong class="style1">Skype : </strong> <a href="#">menardmam</a></p>
    <p align="left"><strong class="style1">Courriel :</strong><a href="https://web.archive.org/web/20100104192317/mailto:[email protected]">    [email protected]</a></p></td>
  </tr>
  </tbody>
</table>

Dado que los elementos uly lison display: blockpredeterminados, déles márgenes automáticos y un ancho que sea más pequeño que su contenedor .

ul {
    width: 70%;
    margin: auto;
}

Si ha cambiado su propiedad de visualización o ha hecho algo que anula las reglas de alineación normales (como flotarlas), esto no funcionará.

Para centrar ul y también tener los elementos li centrados en él , y hacer que el ancho del ul cambie dinámicamente, use display: inline-block; y envuélvalo en un div centrado.

<style type="text/css">
    .wrapper {
        text-align: center;
    }
    .wrapper ul {
        display: inline-block;
        margin: 0;
        padding: 0;
        /* For IE, the outcast */
        zoom:1;
        *display: inline;
    }
    .wrapper li {
        float: left;
        padding: 2px 5px;
        border: 1px solid black;
    }
</style>

<div class="wrapper">
    <ul>
        <li>Three</li>
        <li>Blind</li>
        <li>Mice</li>
    </ul>
</div>

Actualizar

Aquí hay un enlace jsFiddle al código anterior.

Me encanta flexbox:

ul {
  justify-content: center;
  display: flex;
}

Pasos:

1. Escribir style="text-align:center;"al padre divdeul
2. Escribir style="display:inline-table;"aul
3. Escribir style="display:inline;"ali

o usar

<div class="menu">
 <ul>
   <li>item 1 </li>
   <li>item 2 </li>
   <li>item 3 </li>
 </ul>
</div>

<style>
 .menu { text-align: center; }
 .menu ul { display:inline-table; }
 .menu li { display:inline; }
</style>

Esta es una mejor manera de centrar UL dentro de cualquier contenedor DIV.

Esta solución CSS no utiliza las propiedades Width y Float.Flotante: Izquierda y Ancho: 70%, le causará dolores de cabeza cuando necesite duplicar su menú en diferentes páginas con diferentes elementos de menú.

En lugar de usar ancho, usamos relleno y margen para determinar el espacio alrededor del elemento de texto / menú. Además, en lugar de usar Float: Left en el elemento LI, use display: inline-block.

Al hacer flotar su LI a la izquierda, literalmente hace flotar su contenido a la izquierda y luego debe usar uno de los Hacks mencionados anteriormente para centrar su UL. Pantalla: inline-block crea su propiedad Float por usted (más o menos). Toma su elemento LI y lo convierte en un elemento de bloque que se coloca uno al lado del otro (no flotando).

Con el diseño receptivo y el uso de marcos como Bootstrap o Foundation, habrá problemas al intentar flotar y centrar el contenido. Tienen algunas clases integradas, pero siempre es mejor hacerlo desde cero. Esta solución es mucho mejor para menús dinámicos (como el sistema de menús Adobe Business Catalyst).

Se puede encontrar una referencia para este tutorial en: http://html-tuts.com/center-div-image-table-ul-inside-div/

HTML

<div class="container">
        <ul>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
        </ul>
    </div>

CSS

.container {
    text-align: center;
    border: 1px solid green;
}
.container ul {
    border: 2px solid red;
    display: inline-block;
    margin: 10px 0;
    padding: 2px;
}
.container li {
    display: inline-block;
}
.container li a {
    display: inline-block;
    background: #444;
    color: #FFF;
    padding: 5px;
    text-decoration: none;
}

Podría ser

div ul
{
 width: [INSERT FIXED WIDTH]
 margin: 0 auto;
}

o

div li
{
text-align: center;
}

depende de cómo debería verse (o combinarlos)

Para centrar un objeto de bloque (por ejemplo, el ul), debe establecer un ancho en él y luego puede establecer los márgenes izquierdo y derecho de los objetos en automático.

Para centrar el contenido en línea del objeto de bloque (por ejemplo, el contenido en línea de li) puede establecer la propiedad css text-align: center;.

Tratar

div#divID ul {margin:0 auto;}

Solo agregue text-align: center;a su <ul>. Problema resuelto.

Interesante, pero intente esto con elementos li flotantes dentro de ul: Ejemplo aquí

El problema ahora: el ul necesita un ancho fijo para asentarse realmente en el centro. Sin embargo, queremos que sea en relación con el ancho del contenedor (o dinámico), el margen: 0 auto en el ul no funciona.

Una mejor manera es dejar de lado la lista UL / Li y usar un ejemplo de enfoque diferente aquí

Si conoce el ancho del ul, simplemente puede establecer el margen del ula0 auto;

Esto alineará el ul en el medio del div contenedor

Ejemplo:

HTML:

<div id="container">
 <ul>
  <li>Item1</li>
  <li>Item2</li>
 </ul>
<div>

CSS:

  #container ul{
    width:300px;
    margin:0 auto;
  }

Aquí está la solución que pude encontrar:

#wrapper {
  float:right;
  position:relative;
  left:-50%;
  text-align:left;
}
#wrapper ul {
  list-style:none;
  position:relative;
  left:50%;
}

#wrapper li{
  float:left;
  position:relative;
}

Otra opcion es:

HTML

<nav>
  <ul class = "main-nav"> 
   <li> Productos </li>
   <li> Catalogo </li>
   <li> Contact </li>  
   <li> Us </li>
  </ul>
</nav>    

CSS:

nav {
  text-align: center;
}

nav .main-nav li {
  float: left;
  width: 20%;
  margin-right: 5%;
  font-size: 36px;
  text-align: center;
}

He estado buscando el mismo caso y probé todas las respuestas cambiando el ancho de <li>.
Desafortunadamente, no todos pudieron obtener la misma distancia a la izquierda y a la derecha de la <ul>caja.

La coincidencia más cercana es esta respuesta, pero necesita ajustar el cambio de ancho con relleno

.container ul {
    ...
    padding: 10px 25px;
}

.container li {
  ...
  width: 100px;
}

Vea el resultado a continuación, todas las distancias entre <li>también y la <ul>caja son iguales.

Puede verificarlo en este jsFiddle:
http://jsfiddle.net/qwbexxog/14/

<div id="container">
  <table width="100%" height="100%">
    <tr>
      <td align="center" valign="middle">
        <ul>
          <li>item 1</li>
          <li>item 2</li>
          <li>item 3</li>
        </ul>
      </td>
    </tr>
  </table>
</div>

utilizar etiquetas de centro de la vieja escuela

<div> <center> <ul> <li>...</li> </ul></center> </div>

:-)