Como tantas cosas de CSS, hay todo tipo de cosas pequeñas que saber, incluso algo tan minúsculo como centrar un marcador de lista.
Un lector escribió con una captura de pantalla de lo que estaba tratando de lograr, básicamente una lista ordenada (
- ) con los marcadores de lista (1., 2., 3., etc.) en la parte superior 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 debe saber es que list-style-positiondebe ser inside. Eso hará que comience la fiesta central. Si tenemos un descanso antes del contenido, estamos prácticamente ahí. En el video, jugamos con el uso del ::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 en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 86 | 68 | No | 86 | 11,1 |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 81 | 11.3-11.4 |