Πώς να κεντρώσετε τη λίστα

Μάθετε πώς να χρησιμοποιήσετε το CSS για να κεντρώσετε τη λίστα.

η λίστα στο κέντρο

  • Καφές
  • Τσάι
  • Κόλα

το HTML λίστας στο κέντρο

Βήμα 1 - Προσθέστε HTML:

να <ul> οι στοιχεία στο εσωτερικό του στοιχείου κοντέινερ, π.χ. <div>:

<div class="container">
  <ul class="myUL">
    <li>Καφές</li>
    <li>Τσάι</li>
    <li>Κόλα</li>
  </ul>
</div>

Βήμα 2 - Προσθέστε CSS:

να <div> οι στοιχεία στο κέντρο και να <ul> η εμφάνιση μετατρέπεται σε inline-block。

ή μπορείτε να εξισώσετε τα στοιχεία της λίστας στα αριστερά για να αποκτήσετε μια πιο οργανωμένη εμφάνιση:

div.container {
  text-align: center;
{}
ul.myUL {
  display: inline-block;
  text-align: left;
{}

Δοκιμάστε το προσωπικά

Σχετικές σελίδες

Εκμάθηση:Συμφωνία CSS