Cómo alinear una lista con viñetas en HTML/CSS

Las listas con viñetas (<ul>) sirven para menús, organizar imágenes para slideshows, etc. Combinarlas con CSS abre muchas posibilidades de diseño.

Paso 1: Preparar CSS

Abre tu HTML. Busca entre <head> y </head>. Añade etiquetas <style> si no existen. Si hay un <link> a CSS externo, edita ese archivo. El CSS va entre <style> o en nueva línea del archivo CSS.

Paso 2: Alinear texto dentro de viñetas

Usa text-align en el selector ul. Afecta al texto de cada viñeta, no a la posición de la lista en la página. Ejemplo:

ul { text-align: right; }

Las viñetas se quedan a la izquierda; solo el texto se alinea a derecha.

Paso 3: Alinear toda la lista (float)

Usa float en ul para mover la lista completa a izquierda/derecha:

ul { float: right; }

Valores: left, right. No hay center.

Paso 4: Centrar la lista

Envuelve <ul> en <div> y usa CSS:

div { display: block; text-align: center; }
ul { display: inline-block; text-align: left; }

Consejo

Para menús horizontales: li { float: left; } y ul { list-style: none; } oculta viñetas. Luego da estilo con colores y espaciado.