Κείμενο Κέντρου HTML - Τρόπος CSS Vertical Align a Div

Στον κόσμο των HTML και CSS, πρόκειται για τη δομή της διάταξης και τη διανομή των στοιχείων. Συνήθως χρησιμοποιούμε HTML για να ορίσουμε τη σήμανση και τη δομή, ενώ το CSS μας βοηθά να χειριστούμε το στυλ και την ευθυγράμμιση των στοιχείων.

Σε αυτήν την ανάρτηση θα μάθουμε λίγο για τους διαφορετικούς τρόπους με τους οποίους μπορούμε να κεντράρουμε στοιχεία HTML και να χειριζόμαστε κάθετη ευθυγράμμιση με CSS.

Πρώτα θα μάθουμε πώς να ευθυγραμμίζουμε το κείμενο με το CSS.

Στη συνέχεια, θα καλύψουμε τον τρόπο ευθυγράμμισης div και οποιωνδήποτε άλλων στοιχείων.

Και τέλος θα μάθουμε πώς μπορούμε να βάλουμε κείμενο και ένα divμαζί σε ένα δοχείο.

Πώς να κεντράρετε το κείμενο

Υπάρχουν πολλοί τρόποι να κεντράρετε το κείμενο χρησιμοποιώντας το CSS.

Χρήση της ιδιότητας Float

Το Float είναι ένας εύκολος τρόπος ευθυγράμμισης του κειμένου.

Για να τοποθετήσετε το κείμενο στη δεξιά πλευρά της διάταξης, μπορούμε απλά να το χρησιμοποιήσουμε right  ως τιμή για float.

Για να τοποθετήσετε το κείμενο στην αριστερή πλευρά, χρησιμοποιούμε left, όπως float:left. Δείτε το παρακάτω παράδειγμα:

 .right { float: right; } .left { float: left; } // HTML Right Left

Για να κεντράρετε το κείμενο χρησιμοποιώντας float μπορούμε να το χρησιμοποιήσουμε margin-leftή margin-rightνα το φτιάξουμε   50%, όπως παρακάτω.

 .center { float: left; margin-left: 50%; } /* HTML*/ Center

Μπορείτε να μάθετε περισσότερα για τις χρήσεις του Floatεδώ.

Χρήση ευθυγράμμισης κειμένου

text-alignείναι ένας πιο βολικός και πιο συγκεκριμένος τρόπος ευθυγράμμισης κειμένου. Μας επιτρέπει να τοποθετήσουμε το κείμενο στο centerή στο leftή στο rightπλάι, όπως δείχνει το ακόλουθο παράδειγμα:

.right { text-align: right; } .left { text-align: left; } .center { text-align: center; } /* HTML */ 

Right

Center

Left

Μάθετε περισσότερα για text-align.

Πώς να ευθυγραμμίσετε a div

Λοιπόν, υπάρχουν πολλοί τρόποι για να το κάνετε αυτό.

Με τον ίδιο τρόπο που χρησιμοποιούμε Floatγια να ευθυγραμμίσουμε το κείμενο, μπορούμε να το χρησιμοποιήσουμε και για να ευθυγραμμίσουμε ένα divστοιχείο.

Floatκάνει τη δουλειά, αλλά το CSS μας δίνει καλύτερες επιλογές που είναι πιο βολικές και κομψές. Έχετε ακούσει Flexbox; Ή css-grid;

Λοιπόν, αυτές οι δύο μέθοδοι παρέχουν πολύ μοντέρνους τρόπους ευθυγράμμισης και εργασίας με τη διάταξή σας στο CSS. Ας δούμε λεπτομερέστερα το Flexbox.

Flexbox  

Το Flexbox προσφέρει έναν εύκολο και απλό τρόπο ευθυγράμμισης ενός div- και είναι η αγαπημένη μου μέθοδος μέχρι τώρα για τον χειρισμό διατάξεων στο CSS (το χρησιμοποιώ καθημερινά).

Ας δούμε τι θα κάναμε για Flexboxνα δούμε πώς λειτουργεί δημιουργώντας το ίδιο παράδειγμα όπως παραπάνω.

Το παράδειγμα:

Ο κώδικας:

      Flexbox  .container { display: flex; } .container div { width: 33%; height: 60px; } .left { background: yellow; } .right { background: red; } .center { background: lightblue; } Left div centered div right div 

ας το σπάσουμε

  • Ορίζουμε πάντα έναν div  γονέα που χρησιμοποιεί display:flexγια να κάνει αίτηση Flexbox. Έτσι, κάνουμε όλα τα παιδιά του div μέσα στον γονέα να divμπορούν να χειριστούν χρησιμοποιώντας Flexboxιδιότητες.
  • Το   flex-directionχρησιμοποιεί την rowκατεύθυνση από προεπιλογή, η οποία σημαίνει ότι τα στοιχεία θα τοποθετηθούν κάθετα μέσα στο δοχείο.
  • Με την justify-contentιδιότητα μπορούμε να ευθυγραμμίσουμε divτα παιδιά σε διαφορετικές κατευθύνσεις όπως το ακόλουθο παράδειγμα:
.container{ display: flex: justify-content:center /* flex-start, flex-end, space-between, space-evenly, space-around etc */ }
  • justify-content:center  τοποθετεί τα στοιχεία στο κέντρο του δοχείου.
  • justify-content:flex-start βάζει τα στοιχεία στην αρχή του δοχείου στα αριστερά.
  • justify-content:flex-end τοποθετεί στοιχεία στο άκρο του δοχείου στη δεξιά πλευρά.
  • justify-content:space-around κάνει τα στοιχεία να ταιριάζουν στο δοχείο και βάζει το ίδιο κενό μεταξύ όλων των στοιχείων.
  • justify-content:space-evenly διανέμει τα στοιχεία εντός του γονικού κοντέινερ εξίσου με τον ίδιο χώρο και το ίδιο πλάτος.

Το παραπάνω παράδειγμα ισχύει για τα παιδιά όλων των στοιχείων ως ομάδα.

Φανταστείτε εάν θέλαμε να ευθυγραμμίσουμε ένα divστο εσωτερικό του δοχείου. Μπορούμε πάντα να χρησιμοποιήσουμε align-selfγια να ευθυγραμμίσουμε ένα μόνο στοιχείο.

.container div{ align-self:center /* can have: flex-start, or flex-end*/ }

Μπορούμε να εφαρμόσουμε το ίδιο πράγμα σε ένα κείμενο με Flexboxτο ακόλουθο παράδειγμα:

  .right{ display: flex; align-items: flex-end; flex-direction: column; } right div 

Αυτό είναι ένα υπέροχο tweet από τη Julia Evans που δείχνει το κεντράρισμα στο CSS γενικά:

Τύλιξε

Υπάρχουν πολλοί τρόποι κεντραρίσματος στοιχείων στο CSS. Και θα μαθαίνετε πάντα νέα πράγματα με την πάροδο του χρόνου καθώς εξασκείτε όλο και περισσότερο.

Προτείνω λοιπόν να επεξεργαστείτε μερικά παραδείγματα από αυτά που μάθατε σήμερα, ώστε να κολλήσει.

  • Πρέπει να με ακολουθήσετε Twitter;
  • Δείτε το My Github
  • Επισκεφθείτε το ιστολόγιό μου