Come tante cose CSS, ci sono tante piccole cose da sapere, anche qualcosa di minuscolo come centrare un marcatore di lista.
Un lettore ha scritto con uno screenshot di ciò che stava cercando di realizzare - fondamentalmente un elenco ordinato (
- ) con gli indicatori di elenco (1., 2., 3., ecc.) in cima al contenuto dell'elenco e centrati. Nello screenshot, il testo era centrato, ma i numeri no. Quindi, centriamo quei numeri!
La prima cosa da sapere è che list-style-position
deve esserlo inside
. Questo farà iniziare la festa del centraggio. Se abbiamo una pausa prima del contenuto, siamo praticamente lì. Nel video giochiamo con l'uso di ::marker
per fare questo, trovando i limiti ed esplorando tutte le idee.
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
Cromo | Firefox | IE | Bordo | Safari |
---|---|---|---|---|
86 | 68 | No | 86 | 11.1 |
Mobile / Tablet
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
88 | 85 | 81 | 11.3-11.4 |