#202: Marcadores de lista centrados

Como tantas cosas CSS, hay todo tipo de pequeñas cosas que saber, incluso algo tan minúsculo como centrar un marcador de lista.

Un lector escribió con una captura de pantalla de lo que intentaban lograr: básicamente una lista ordenada ( ol) con los marcadores de lista (1., 2., 3., etc.) encima del contenido de la lista y centrados. En la captura de pantalla, el texto estaba centrado, pero los números no. Entonces, ¡centremos esos números!

Lo primero que hay que saber es que list-style-positiontiene que ser así inside. Eso hará que comience la fiesta central. Si tenemos un descanso antes del contenido, prácticamente llegamos. En el vídeo, jugamos con el uso de ::markerpara hacer esto, mientras encontramos limitaciones y exploramos todas las ideas.

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y superiores.

Escritorio

cromo	Firefox	ES DECIR	Borde	Safari
86	68	No	86	11.1

Móvil/Tableta

androidcromo	Android Firefox	androide	Safari en iOS
124	125	124	11.3-11.4