Ποιοι είναι οι τρόποι οριζόντιας κεντράρισμα στοιχείων σε μια ιστοσελίδα;

Υπάρχουν αρκετοί συνηθισμένοι τρόποι:

• text-align: Για inline (inline ή inline-block) στοιχεία μέσα στο γονικό μπλοκ. Ο γονέας πρέπει να έχει text-align: center.

• margin: auto: Για στοιχεία μπλοκ (block). Το στοιχείο πρέπει να έχει ορισμένο πλάτος (width). Ο περιηγητής κατανέμει αυτόματα τον διαθέσιμο χώρο στα αριστερά και δεξιά.

  .element {
    width: 200px;
    margin: 0 auto;
  }
  

• Flexbox: Ευέλικτο σύστημα διάταξης. Εφαρμόζεται στο γονικό κοντέινερ.

  .container {
    display: flex;
    justify-content: center; /* Ευθυγραμμίζει τα στοιχεία κατά μήκος του κύριου άξονα (οριζόντια) */
  }
  

• Grid: Διμερές σύστημα διάταξης. Εφαρμόζεται στο γονικό κοντέινερ.

  .container {
    display: grid;
    justify-items: center; /* Ευθυγραμμίζει το περιεχόμενο των κελιών οριζόντια */
  }
  

• Position: absolute και transform: Για απολύτως τοποθετημένα στοιχεία με γνωστό πλάτος.

  .parent {
    position: relative;
  }
  
  .child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Μετακινεί το στοιχείο κατά το ήμισυ του πλάτους του προς τα αριστερά */
  }
  

• Display: table και margin: auto: Σπάνια χρησιμοποιείται, αλλά είναι εφικτό.

  .element {
    display: table;
    margin: 0 auto;
  }