HOWTO · HTML
Centrar viñetas en HTML
Las viñetas en HTML le permiten crear una lista de elementos en una página web, con cada elemento de la lista representado por una viñeta. Puede controlar la apariencia de las viñetas mediante CSS y puede usarlas para crear listas ordenadas y desordenadas.
En esta página
Las listas de viñetas se usan para crear listas de elementos relacionados en HTML y se pueden usar para crear esquemas y menús o listas de elementos relacionados. Cada elemento de la lista comienza con una etiqueta <li> .
Los elementos de la lista se mantienen en una etiqueta <ul> (lista desordenada/con viñetas) o <ol> (lista ordenada/numerada). Este artículo nos enseñará los diferentes estilos de viñetas y cómo centrar las viñetas en HTML.
Estilos HTML de viñetas
En HTML, se puede crear una viñeta usando la etiqueta <ul> (lista desordenada), y para darle estilo, usamos el atributo list-style-type. El atributo list-style-type especifica el tipo de marcador para la lista y puede tener los siguientes valores.
disco- Un disco sólido (predeterminado)círculo- Un círculo huecocuadrado- Un cuadrado llenoninguno- Sin marcador (útil para crear listas anidadas)
Disco: un disco sólido (predeterminado)
Para crear una lista de viñetas, cree un elemento <ul> y establezca el atributo list-style-type en el valor deseado.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Círculo - Un círculo hueco
Puede crear viñetas circulares huecas con el siguiente código.
Código:
<h2>Unordered List with Circle Bullets</h2>
<ul style="list-style-type: circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Cuadrado - Un cuadrado lleno
Puede crear viñetas cuadradas con el siguiente código.
<p>The list of developed countries :</p>
<ul style="list-style-type: square;">
<li>US</li>
<li>Australia</li>
<li>New Zealand</li>
</ul>
Ninguno – Sin marcador
Existe el siguiente código para la lista de puntos sin viñetas.
<ul style="list-style-type: none;">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
Centrar viñetas en HTML
Ejemplo de código:
<!DOCTYPE html>
<head>
<style>
.parent {
text-align: center;
}
.parent > ul {
display: inline-block;
}
</style>
</head>
<body>
<h1>Center Bullet Points in HTML</h1>
<div class="parent">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<br>
<ul style="list-style-type: circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<br>
<ul style="list-style-type: square;">
<li>US</li>
<li>Australia</li>
<li>New Zealand</li>
</ul>
</div>
</body>
Conclusión
Las viñetas se centran en HTML utilizando CSS y JavaScript. Se puede hacer una lista de viñetas en HTML usando etiquetas.
HTML ofrece algunas formas diferentes de crear viñetas, y la forma más típica es usar el elemento de lista desordenada. Este elemento creará una viñeta para cada elemento de la lista y también puede usar el elemento de la lista ordenada para crear viñetas numeradas.
