Αυτός ο οδηγός παρουσιάζει τη διαδικασία για οριζόντια και κάθετη στοίχιση με χρήση CSS.
Πώς να ευθυγραμμίσετε οριζόντια και κάθετη χρησιμοποιώντας CSS;
Οι προγραμματιστές χρησιμοποιούν την «οριζόντια» και την «κάθετη» στοίχιση για να τακτοποιήσουν και να τοποθετήσουν στοιχεία σε μια ιστοσελίδα με πιο οργανωμένο τρόπο. Μπορούν να είναι χρήσιμα για τη στοίχιση στοιχείων και περιεχομένων, κουμπιών ή εικονιδίων τοποθέτησης κ.λπ. Ακολουθήστε τα παρακάτω παραδείγματα για καλύτερη κατανόηση:
Οριζόντια ευθυγράμμιση
Στο CSS, η ιδιότητα text-align χρησιμοποιείται για την οριζόντια στοίχιση κειμένου εντός του γονικού στοιχείου. Επισκεφτείτε τα παρακάτω αποσπάσματα κώδικα για καλύτερη κατανόηση:
< σώμα >
< div τάξη = 'λογαριασμός' >
< div τάξη = 'leftAlign' > Το Linuxhint είναι αριστερή στοίχιση < / div >
< div τάξη = 'centerAlign' > Το Linuxhint είναι στοίχιση στο κέντρο < / div >
< div τάξη = 'δεξιά στοίχιση' > Το Linuxhint είναι Right Align < / div >
< / div >
< / σώμα >
Στο παραπάνω απόσπασμα κώδικα:
- Πρώτον, ο γονιός» div Το στοιχείο ' χρησιμοποιείται με ένα χαρακτηριστικό class που έχει τιμή ' λογαριασμός '.
- Στη συνέχεια, έχουν δημιουργηθεί τρία θυγατρικά στοιχεία και το χαρακτηριστικό class έχει εκχωρηθεί σε κάθε div.
- Στο τέλος, οι τιμές 'leftAlign', 'centerAlign' και 'rightAlign' παρέχονται στις κλάσεις.
Τώρα, εισαγάγετε τις ακόλουθες ιδιότητες CSS στο ' <στυλ> Ετικέτα ':
<στυλ >
.αριστερά Ευθυγράμμιση {
απεικόνιση : ενσωματωμένο μπλοκ ;
πλάτος : 30% ;
υλικό παραγεμίσματος : 20 εικονοστοιχεία ;
χρώμα του φόντου : πράσινο του δάσους ;
στοίχιση κειμένου : αριστερά ;
}
.centerAlign {
απεικόνιση : ενσωματωμένο μπλοκ ;
πλάτος : 30% ;
χρώμα του φόντου : το κόκκινο ;
υλικό παραγεμίσματος : 20 εικονοστοιχεία ;
στοίχιση κειμένου : κέντρο ;
}
.δεξιά Ευθυγράμμιση {
απεικόνιση : ενσωματωμένο μπλοκ ;
πλάτος : 30% ;
χρώμα του φόντου : βάσκας ;
υλικό παραγεμίσματος : 20 εικονοστοιχεία ;
στοίχιση κειμένου : σωστά ;
}
>
Στο παραπάνω μπλοκ κώδικα:
- Αρχικά, και οι τρεις κλάσεις επιλέγονται ξεχωριστά και στη συνέχεια εφαρμόζονται ιδιότητες CSS ' απεικόνιση », « πλάτος », « χρώμα του φόντου ' και ' υλικό παραγεμίσματος ' σε αυτούς. Αυτές οι ιδιότητες χρησιμοποιούνται για τη βελτίωση των σκοπών οπτικοποίησης.
- Στη συνέχεια, οι τιμές του ' αριστερά », « κέντρο ' και ' σωστά ' παρέχονται στο ' στοίχιση κειμένου ' ακίνητο προς το ' αριστερά Ευθυγράμμιση », « κέντρο Ευθυγράμμιση ', και ' δεξιά Ευθυγράμμιση ” τάξεις, αντίστοιχα.
Μετά τη διαδικασία μεταγλώττισης, τα στοιχεία HTML μοιάζουν με αυτό:
Το παραπάνω στιγμιότυπο του προγράμματος περιήγησης δείχνει ότι τα στοιχεία είναι οριζόντια ευθυγραμμισμένα στην αριστερή, στο κέντρο και στη δεξιά θέση.
Κατακόρυφη στοίχιση
Το CSS ' κατακόρυφη ευθυγράμμιση Η ιδιότητα ' ευθυγραμμίζει το επιλεγμένο στοιχείο με το ' άξονας y » στο γονικό τους στοιχείο. Οι πιθανές τιμές για την ιδιότητα 'vertical-align' είναι ' γραμμή βάσης », « υπο », « σούπερ », « μπλουζα », « κείμενο-κορυφή », « Μέσης », « κάτω μέρος ', και ' κείμενο-κάτω '. Ωστόσο, οι προγραμματιστές χρησιμοποιούν ως επί το πλείστον τιμές 'κορυφή', 'μεσαία' και 'κάτω' κατά τη δημιουργία σχεδίων ιστοσελίδων. Για να ευθυγραμμίσετε το επιλεγμένο στοιχείο HTML στην επάνω θέση, επισκεφτείτε το παρακάτω απόσπασμα κώδικα:
< div τάξη = 'μετρώ' >< img src = 'hiunsplash.jpg' πλάτος = '200px' ύψος = '200px' >
< σπιθαμή τάξη = 'captionTopAlign' > Αυτό το κείμενο είναι στοιχισμένο επάνω κατακόρυφα δίπλα στην εικόνα < / σπιθαμή >
< / div >
Στο παραπάνω απόσπασμα κώδικα:
- Πρώτα, δημιουργήστε έναν γονέα ' div ' στοιχείο και εκχωρήστε μια τιμή ' μετρώ ' στο ' τάξη ' Χαρακτηριστικό.
- Μέσα στο μητρικό κοντέινερ, χρησιμοποιήστε το '
Προσθέστε ετικέτα και δώστε τη διαδρομή της εικόνας ως τιμή στο src ' Χαρακτηριστικό.
- Επιπλέον, δώστε την τιμή του ' 200 px 'και στους δύο' πλάτος ' και ' ύψος 'ιδιότητες του '
ετικέτα '.
- Στη συνέχεια, χρησιμοποιήστε το ' ' Προσθέστε ετικέτα και δώστε του μια κατηγορία ' captionTopAlign '. Στο τέλος, παρέχετε εικονικά δεδομένα σε αυτό.
Τώρα, προσθέστε ιδιότητες CSS για το στυλ των στοιχείων HTML:
.μετρώ {πλάτος : κατάλληλο περιεχόμενο ;
απεικόνιση : ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ ;
περιθώριο-αριστερά : 100 εικονοστοιχεία ;
υλικό παραγεμίσματος : 10 εικονοστοιχεία ;
σύνορο : 2 εικονοστοιχεία στερεός το κόκκινο ;
}
.captionTopAlign {
κατακόρυφος
Στο παραπάνω μπλοκ κώδικα:
- Πρώτα, επιλέξτε τον γονέα ' μετρώ ' τάξη και παρέχετε τις τιμές 'fit-content', 'block', '100px', '10px' και '2px solid red' στο CSS ' πλάτος », « απεικόνιση », « περιθώριο-αριστερά », « υλικό παραγεμίσματος ' και ' σύνορο ' ιδιότητες. Αυτές οι ιδιότητες χρησιμοποιούνται για το στυλ του γονικού στοιχείου.
- Στη συνέχεια, επιλέξτε το ' captionTopAlign ' τάξη και παρέχετε την τιμή του ' μπλουζα 'στο CSS' κατακόρυφη ευθυγράμμιση ” ιδιοκτησία. Αυτό κάνει το στοιχείο HTML να ευθυγραμμιστεί στην επάνω θέση.
Μετά την εκτέλεση των παραπάνω γραμμών κώδικα, η ιστοσελίδα εμφανίζεται ως εξής:
Το παραπάνω στιγμιότυπο δείχνει ότι το επιλεγμένο στοιχείο HTML είναι πλέον ευθυγραμμισμένο στην κορυφή. Με τον ίδιο τρόπο, το στοιχείο μπορεί να ευθυγραμμιστεί στη μέση, κάτω κατεύθυνση κ.λπ.
συμπέρασμα
Για οριζόντια και κάθετη ευθυγράμμιση, το ' στοίχιση κειμένου ' και ' κατακόρυφη ευθυγράμμιση Χρησιμοποιούνται οι ιδιότητες CSS, αντίστοιχα. Η ιδιότητα 'text-align' επιτρέπει την τιμή του ' αριστερά », « σωστά », « κέντρο ' και ' δικαιολογώ '. Από την άλλη πλευρά, οι πιθανές τιμές για την ιδιότητα 'vertical-align' είναι ' γραμμή βάσης », « υπο », « σούπερ », « μπλουζα », « κείμενο-κορυφή », « Μέσης », « κάτω μέρος ', και ' κείμενο-κάτω '. Η οριζόντια και κάθετη στοίχιση βοηθά στη δημιουργία καθαρών και επαγγελματικών σχεδίων ιστού.