Πώς να κεντράρετε κάθετα ένα στοιχείο div για όλα τα προγράμματα περιήγησης χρησιμοποιώντας CSS

Στην ανάπτυξη ιστού, είναι σημαντικό να δημιουργηθεί σωστά η διάταξη του στοιχείου. Ωστόσο, πολλές ιδιότητες CSS, όπως το CSS3 Flexible Box, είναι χρήσιμες για την προσαρμογή της διάταξης των ιστοσελίδων και των στοιχείων HTML. Το Flexible Box χρησιμοποιείται για την τακτοποίηση ιστοσελίδων και εφαρμογών με αναδρομικό τρόπο. Αυτή η λειτουργία Flexbox βοηθά στη δημιουργία διατάξεων για πολύπλοκες ιστοσελίδες και εφαρμογές.

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

Πώς να ευθυγραμμίσετε το στοιχείο div χρησιμοποιώντας CSS;

Το στοιχείο div μπορεί να ευθυγραμμιστεί κάθετα χρησιμοποιώντας την ιδιότητα εμφάνισης ' καλώδιο 'μαζί με το CSS' στοίχιση-στοιχεία 'περιουσία και' δικαιολογώ-περιεχόμενο ” ιδιοκτησία. Η ιδιότητα 'align-items' ευθυγραμμίζει το στοιχείο κατακόρυφα και η ιδιότητα 'justify-content' ευθυγραμμίζει το περιεχόμενο οριζόντια.

Παράδειγμα: Πώς να κεντράρετε κάθετα ένα στοιχείο div με CSS;

Σε HTML, πρώτα, προσθέστε ένα '

'στοιχείο και αντιστοιχίστε του την κλάση' κυρίως περιεχόμενο '. Ανάμεσα στις ετικέτες '

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

---

---

• ' src Το χαρακτηριστικό ' χρησιμοποιείται για τον καθορισμό της διεύθυνσης URL της εικόνας.
• ' τα παντα Το χαρακτηριστικό ” ορίζει κάποιο κείμενο που θα εμφανίζεται στη θέση μιας εικόνας εάν αποτύχει να φορτωθεί.
• ' πλάτος Το χαρακτηριστικό ' χρησιμοποιείται για την προσαρμογή του πλάτους της εικόνας.
• Στη συνέχεια, προσθέστε το '

  ' στοιχείο για την ενσωμάτωση της παραγράφου στη σελίδα.

Εδώ είναι ο κώδικας HTML:

< div τάξη = 'κυρίως περιεχόμενο' >
< img src = '/images/laptop-notepad.jpg' τα παντα = 'Φορητός υπολογιστής με σημειωματάριο και στυλό' πλάτος = '300' >
< Π > Ο φορητός υπολογιστής είναι επίσης γνωστός φορητός υπολογιστής όπως και φορητό υπολογιστή. Π >
div >

Στο CSS, θα καθορίσουμε αρκετές ιδιότητες στυλ στο div.

Τάξη στυλ «κύριο περιεχομένου».

.κυρίως περιεχόμενο {
ύψος: πενήντα % ;
χρώμα του φόντου: #46C2CB;
μέγεθος γραμματοσειράς: 24 px;
padding: 10px;
}

Οι ακόλουθες ιδιότητες CSS ορίζονται στο ' κυρίως περιεχόμενο ” τάξη:

• ' ύψος Η ιδιότητα ” χρησιμοποιείται για τη ρύθμιση του ύψους του κοντέινερ
  .
• ' χρώμα του φόντου ' ορίζει το χρώμα φόντου του στοιχείου.
• ' μέγεθος γραμματοσειράς ' καθορίζει το μέγεθος γραμματοσειράς του στοιχείου.
• ' υλικό παραγεμίσματος Η ιδιότητα ' θέτει χώρο γύρω από το περιεχόμενο του στοιχείου.

Από την έξοδο, μπορείτε να παρατηρήσετε ότι το περιεχόμενο του στοιχείου div δεν βρίσκεται στο κέντρο:

Ας προχωρήσουμε για να εφαρμόσουμε τις ιδιότητες CSS που βοηθούν στο να κεντράρουμε το '

' στοιχείο κατακόρυφα. Προσθέστε αυτές τις ιδιότητες στην κλάση ' κυρίως περιεχόμενο ' που χρησιμοποιούνται για πρόσβαση στο στοιχείο

:

απεικόνιση: καλώδιο ;
στοίχιση-στοιχεία: κέντρο;

Εδώ είναι η περιγραφή:

• ' απεικόνιση 'περιουσία' καλώδιο ' χρησιμοποιείται για να κάνει τη διάταξη div ευέλικτη στο στοιχείο της.
• ' στοίχιση-στοιχεία 'Η ιδιότητα CSS έχει οριστεί ως ' κέντρο ”, το οποίο θα ευθυγραμμίσει κάθετα τα στοιχεία div.

Παραγωγή

Έχετε μάθει πώς να κεντράρετε ένα στοιχείο div κατακόρυφα για όλα τα προγράμματα περιήγησης που χρησιμοποιούν CSS.

συμπέρασμα

Για να κεντράρετε κάθετα ένα στοιχείο div, το CSS ' απεικόνιση «Το ακίνητο αξιοποιείται με το « καλώδιο ' αξία. Αυτή η τιμή κάνει το κοντέινερ

ευέλικτο στα στοιχεία του. Για να ευθυγραμμίσετε κάθετα το στοιχείο div, προσαρμόστε το ' στοίχιση-στοιχεία ' ακίνητο και εκχωρήστε του ένα ' κέντρο ' αξία. Αυτό το ιστολόγιο σάς έδειξε πώς να χρησιμοποιείτε το CSS για να κεντράρετε κάθετα στοιχεία div σε όλα τα προγράμματα περιήγησης.