Κεντράρισμα κειμένου κάθετα σε ένα Div με χρήση CSS

Προηγμένες τεχνικές CSS για κάθετο κεντράρισμα

Στο τρίτο σενάριο, χρησιμοποιούμε τη μέθοδο εμφάνισης πίνακα. Σύνθεση display: table; στο δοχείο και display: table-cell; σε ένα ψευδοστοιχείο που δημιουργήθηκε με ::before μας επιτρέπει να χρησιμοποιήσουμε το vertical-align: middle; ιδιοκτησία. Αυτή η μέθοδος μιμείται τη συμπεριφορά των κελιών του πίνακα, καθιστώντας δυνατή την κατακόρυφο κεντράρισμα του περιεχομένου. Αν και αυτή η προσέγγιση χρησιμοποιείται λιγότερο συχνά στη σύγχρονη σχεδίαση ιστοσελίδων, μπορεί να είναι χρήσιμη για τη διατήρηση της συμβατότητας με παλαιότερα προγράμματα περιήγησης ή όταν πρόκειται για κώδικα παλαιού τύπου. Παρέχει έναν αξιόπιστο τρόπο για να κεντράρετε περιεχόμενο χωρίς να βασίζεστε σε νεότερα συστήματα διάταξης.

Το τέταρτο παράδειγμα σεναρίου χρησιμοποιεί το line-height ιδιοκτησία. Ρυθμίζοντας το line-height ίσο με το ύψος του κοντέινερ, το κείμενο είναι κάθετα κεντραρισμένο. Αυτή η τεχνική είναι απλή και αποτελεσματική για κείμενο μιας γραμμής. Ωστόσο, ενδέχεται να μην είναι κατάλληλο για κείμενο πολλών γραμμών ή δυναμικό περιεχόμενο όπου το ύψος του κοντέινερ μπορεί να αλλάξει. Παρά τους περιορισμούς του, το line-height Η μέθοδος είναι μια γρήγορη και εύκολη λύση για κάθετο κεντράρισμα κειμένου σε απλά σενάρια.

Χρήση του Flexbox για κάθετο κεντράρισμα

CSS Flexbox

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

Χρήση Πλέγματος για Κατακόρυφο Κεντράρισμα

Πλέγμα CSS

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: grid;
  place-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

Χρήση της οθόνης πίνακα για κάθετο κεντράρισμα

Εμφάνιση πίνακα CSS

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: table;
}
#box::before {
  content: "";
  display: table-cell;
  vertical-align: middle;
}
#box > div {
  display: inline-block;
  vertical-align: middle;
}
<div id="box"><div>Lorem ipsum dolor sit</div></div>

Χρήση ύψους γραμμής για κάθετο κεντράρισμα

Ύψος γραμμής CSS

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  line-height: 170px;
  text-align: center;
}
<div id="box">Lorem ipsum dolor sit</div>

Συνήθεις ερωτήσεις σχετικά με το κάθετο κεντράρισμα στο CSS

1. Ποιος είναι ο ευκολότερος τρόπος για να κεντράρετε κάθετα κείμενο σε ένα div;
2. Χρησιμοποιώντας display: flex; με justify-content: center; και align-items: center; είναι συχνά η πιο εύκολη και αποτελεσματική μέθοδος.
3. Πώς κεντράρετε κάθετα το κείμενο σε παλαιότερα προγράμματα περιήγησης;
4. Χρησιμοποιώντας τη μέθοδο εμφάνισης πίνακα με display: table; και vertical-align: middle; μπορεί να βοηθήσει στην επίτευξη κάθετου κεντραρίσματος σε παλαιότερα προγράμματα περιήγησης.
5. Μπορεί το CSS Grid να χρησιμοποιηθεί για να κεντράρει κείμενο κατακόρυφα;
6. Ναι, το CSS Grid μπορεί να κεντράρει το κείμενο κατακόρυφα χρησιμοποιώντας display: grid; και place-items: center;.
7. Είναι δυνατό να κεντράρετε κάθετα κείμενο πολλών γραμμών;
8. Ναι, χρησιμοποιώντας το Flexbox ή το CSS Grid μπορείτε εύκολα να κεντράρετε το κείμενο πολλών γραμμών κατακόρυφα μέσα σε ένα κοντέινερ.
9. Πώς κεντράρετε κάθετα το κείμενο με ένα γνωστό ύψος κοντέινερ;
10. Μπορείτε να ρυθμίσετε το line-height ιδιότητα να ταιριάζει με το ύψος του κοντέινερ, κεντρίζοντας αποτελεσματικά το κείμενο.
11. Τι γίνεται αν το ύψος του δοχείου είναι δυναμικό;
12. Χρησιμοποιώντας το Flexbox, το Grid ή το transform Η ιδιότητα εξασφαλίζει σταθερό κατακόρυφο κεντράρισμα, ακόμη και με δυναμικά ύψη δοχείου.
13. Υπάρχουν μειονεκτήματα στη χρήση transform: translateY(-50%);?
14. Ενώ είναι αποτελεσματικό, απαιτεί από τον γονέα να έχει position: relative; και μπορεί να είναι ελαφρώς πιο περίπλοκη στην εφαρμογή σε σύγκριση με το Flexbox ή το Grid.
15. Πώς κεντράρετε κάθετα το κείμενο σε μια αποκριτική σχεδίαση;
16. Η χρήση Flexbox ή CSS Grid συνιστάται ιδιαίτερα για σχέδια με απόκριση, καθώς προσαρμόζονται καλά σε διαφορετικά μεγέθη και προσανατολισμούς οθόνης.

Τελικές σκέψεις για το κάθετο κεντράρισμα

Η επίτευξη κάθετου κεντραρίσματος του κειμένου μέσα σε ένα div μπορεί να επιτευχθεί με διάφορες αποτελεσματικές μεθόδους. Οι σύγχρονες τεχνικές όπως το Flexbox και το Grid προσφέρουν τη μεγαλύτερη ευελιξία και ευκολία υλοποίησης. Παλαιότερες μέθοδοι, όπως η εμφάνιση πίνακα και το ύψος γραμμής, μπορούν ακόμα να είναι χρήσιμες σε συγκεκριμένες περιπτώσεις. Κατανοώντας και εφαρμόζοντας αυτές τις διαφορετικές προσεγγίσεις, οι προγραμματιστές μπορούν να διασφαλίσουν ότι το περιεχόμενό τους είναι οπτικά ελκυστικό και σωστά ευθυγραμμισμένο σε διάφορες συσκευές και προγράμματα περιήγησης.