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

88

¿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>

menardmam
fuente

Respuestas:

139

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á.

Quentin
fuente
4
si esto no te hace feliz, probablemente lo hará: stackoverflow.com/questions/2865380/…
Bruiser
10
Ancho de configuración: automático; y pantalla: bloque en línea; permitiría que su ul se comporte como una línea de texto. A continuación, puede utilizar text-align: center; en el elemento padre. Esto también permitiría que su ul crezca y se reduzca a medida que cambia el contenido interno, en lugar de tener un ancho fijo.
i_a
@Chetabahana - Estás mirando el texto, no el elemento: jsfiddle.net/qwbexxog/3
Quentin
no funciona bien con todas las resoluciones, el centro flexible está funcionando
Srinivas08
163

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.

Aram Kocharyan
fuente
Ese es el problema que tuve con las otras soluciones, no funcionaría para los elementos li si los cambiaba.
Aram Kocharyan
Estaba usando esto para Bootstrap 3 nav y necesitaba agregarlo float: none;al archivo ul.
Dylan Valade
34

Me encanta flexbox:

ul {
  justify-content: center;
  display: flex;
}
Christian Michael
fuente
22

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>
Dashrath
fuente
Tenemos que agregar margen, de lo contrario, se anidan entre sí, verifique aquí jsfiddle.net/qwbexxog/4
Chetabahana
9

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;
}
Especialistas web de DSA
fuente
6

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)

FP
fuente
2
La última opción no centraría los elementos de la lista, solo su contenido en línea.
Quentin
Aún así, si <li>no tienen estilo, se ve igual.
FP
4

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;.

anddoutoi
fuente
1

Tratar

div#divID ul {margin:0 auto;}
Keir
fuente
1

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

Jonny Haynes
fuente
1

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í

Plippie
fuente
0

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;
  }
Jamie Dixon
fuente
0

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;
}
Adam Boostani
fuente
0

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;
}
Trapo
fuente
0

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.ingrese la descripción de la imagen aquí

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

Chetabahana
fuente
-1
<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>
Hola mamá
fuente
-4

utilizar etiquetas de centro de la vieja escuela

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

:-)

justastefan
fuente
Debe evitar el uso de expresiones de tipo de estilo en el código de marcado. ¡Para eso se creó CSS!
FP
1
Funcionable, pero tenga en cuenta que: "El centerelemento quedó obsoleto en HTML 4.01 y no es compatible con XHTML 1.0 Strict DTD" de w3schools.com/TAGS/tag_center.asp
okw
4
suspiro W3Schools proporcionando información incorrecta e incompleta como de costumbre. Fue desaprobado en 4.0, no en 4.01, y no aparece en ninguna variante Strict (destacar XHTML 1.0 es una elección extraña).
Quentin
Como se mencionó anteriormente, estos fueron obsoletos en HTML 4.01 ... también eso es solo una mala práctica ...
Jonny Haynes
2
Sí, no debería usar este tipo de etiqueta, pero esta no es una razón para merecer una respuesta negativa. A veces, queremos la solución más rápida. Y para mí esta respuesta es positiva.
workdreamer