Centrar viñetas en HTML
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.
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn