Come centrare il testo in li?

Sto cercando di avere una spaziatura equa tra quattro diversi elementi li , ma alla fine ho questo:

inserisci la descrizione dell'immagine qui

HTML:

  • Inbox
  • Drafts
  • Sent
  • Trash

CSS:

 ul li { width: 25%; display: inline-block; text-align: center; } 

Ho testato il CSS e funziona come dovrebbe. Penso che il problema sia che non tutti hanno la stessa quantità di lettere, quindi ti ritroverai con strani effetti visivi. La mia ragione per credere questo:

inserisci la descrizione dell'immagine qui

(Distanza uguale)

Il mio approccio con questo problema è quello di centrare il li sull’ul poiché l’ul sarà naturalmente la stessa larghezza del genitore.

 ul { /* Use flex boxes to align li items */ display: flex; justify-content: space-around; /* Remove default padding from major browsers */ padding: 0; /* Hide the default decorations for li items */ list-style: none; } ul > li { /* Display the elements in one line */ display: inline-block; } 

Dai un’occhiata a questo JSFiddle per vederlo funzionare.

Prova questo

 ul { width:100%; margin-left: 0; margin-bottom: 0 } li { list-style-type: none; display: inline-block; margin-right: 20px; }