Cómo alinear una lista de viñetas en HTML

Los diseñadores web usan listas de viñetas para algo más que agregar viñetas y texto. La etiqueta HTML utilizada para crear listas de viñetas es útil para crear menús u organizar imágenes para que JavaScript las cargue en una presentación de diapositivas. Aprender a usar código de hoja de estilo en cascada junto con listas de viñetas (llamadas "listas desordenadas" en la jerga HTML) abrirá varias posibilidades interesantes de diseño web.

Paso 1

Abra su archivo HTML que contiene la lista con viñetas y busque entre las y etiquetas hacia la parte superior del código. Agregue etiquetas si aún no están presentes. Si su código incluye una etiqueta en algún lugar después de la , y que contiene una referencia a un archivo CSS, luego abra ese archivo en su lugar. Su código CSS va entre las etiquetas o en una nueva línea de su archivo CSS.

Paso 2

Alinee el texto dentro de todas las viñetas configurando "text-align" para su etiqueta

. La etiqueta
envuelve el
• y
etiquetas para definirlas como parte de una sola lista. Cuando alinea el texto para la etiqueta
, la alineación afecta el texto de cada viñeta, pero no alinea la lista a la izquierda oa la derecha de la página. Aquí hay un ejemplo de código CSS para configurar "alinear texto":

ul {text-align:right;}

Tenga en cuenta que las viñetas no se mueven con el texto. Las balas se quedan a la izquierda en este caso.

Paso 3

Alinee toda la lista a la izquierda o a la derecha de la página configurando "flotante" para su etiqueta

. Cuando "flotante" se establece a la izquierda oa la derecha en una etiqueta
, mueve toda la lista con viñetas a la izquierda oa la derecha de la página. Establecer flotador así:

ul {flotante:derecha;}

Puede configurar "flotante" a la izquierda o a la derecha, pero no al centro.

Paso 4

Envuelva sus etiquetas

y etiquetas para crear un envoltorio que centrará la lista con viñetas en su página. Su código resultante se verá así:
• Artículo de lista
• Artículo de lista

La etiqueta no centra nada por sí misma; debes usar CSS para centrar todo. Agrega el siguiente código entre tus etiquetas