Κεντράρετε εικόνες, κείμενο και στοιχεία μπλοκ κατά την οικοδόμηση ιστοσελίδων
Εάν μαθαίνετε πώς να δημιουργείτε ιστότοπους , ένα από τα πιο κοινά κόλπα που θα χρειαστεί να μάθετε είναι πώς να κεντράρετε τα στοιχεία στο παράθυρο του προγράμματος περιήγησης. Αυτό θα μπορούσε να σημαίνει κεντράρισμα μιας εικόνας στη σελίδα, ή θα μπορούσε να είναι κείμενο που δικαιολογεί το κέντρο, όπως τα πρωτοσέλιδα ως μέρος του σχεδίου.
Ο σωστός τρόπος για να ολοκληρώσετε αυτή την οπτική εμφάνιση των κεντροποιημένων εικόνων ή κειμένων ή ακόμα και ολόκληρης της ιστοσελίδας σας είναι με τη χρήση των Φύλλων Στυλ Κατανομής (CSS) . Οι περισσότερες από τις ιδιότητες για κεντράρισμα βρίσκονται στο CSS από την έκδοση 1.0 και λειτουργούν εξαιρετικά με το CSS3 και τα σύγχρονα προγράμματα περιήγησης ιστού .
Όπως πολλές πτυχές του σχεδιασμού ιστοσελίδων, υπάρχουν πολλοί τρόποι για να χρησιμοποιήσετε το CSS για να συγκεντρώσετε στοιχεία σε μια ιστοσελίδα. Ας ρίξουμε μια ματιά σε μερικούς διαφορετικούς τρόπους για να χρησιμοποιήσετε το CSS για να επιτύχουμε αυτή την οπτική εμφάνιση.
Επισκόπηση της χρήσης του CSS σε στοιχεία του κέντρου σε HTML
Κέντρισμα με CSS μπορεί να είναι μια πρόκληση για αρχάριους σχεδιαστές ιστοσελίδων, επειδή υπάρχουν τόσοι πολλοί διαφορετικοί τρόποι για να επιτευχθεί αυτό το ένα οπτικό στυλ. Ενώ η ποικιλία των μεθόδων μπορεί να είναι ωραίο ή έμπειρο προγραμματιστές Ιστού που γνωρίζουν ότι δεν είναι όλες οι τεχνικές εργασίες σε κάθε στοιχείο, αυτό μπορεί να είναι τρομερά δύσκολο για τους νεότερους επαγγελματίες του διαδικτύου δεδομένου ότι η μεγάλη ποικιλία μεθόδων σημαίνει ότι πρέπει να γνωρίζουν πότε να χρησιμοποιήσουν ποια προσέγγιση. Το καλύτερο που πρέπει να κάνετε είναι να κατανοήσετε μερικές προσεγγίσεις. Καθώς αρχίζετε να τα χρησιμοποιείτε, θα μάθετε ποια μέθοδος λειτουργεί καλύτερα σε ποιες περιπτώσεις.
Σε υψηλό επίπεδο, μπορείτε να χρησιμοποιήσετε το CSS για να:
- Κέντρο κειμένου
- Κεντράρισμα ενός στοιχείου σε επίπεδο μπλοκ (όπως ένα τμήμα)
- Κεντράρετε μια εικόνα
- Κατακόρυφα κεντράρετε ένα μπλοκ ή μια εικόνα
Πολλά (πριν) χρόνια, οι σχεδιαστές ιστοσελίδων θα μπορούσαν να χρησιμοποιήσουν το στοιχείο
Κεντράρισμα κειμένου με CSS
Το πιο εύκολο πράγμα που πρέπει να εστιάσετε σε μια ιστοσελίδα είναι το κείμενο. Υπάρχει μόνο μία ιδιότητα στυλ που πρέπει να ξέρετε για να το κάνετε αυτό: text-align. Πάρτε το στυλ CSS παρακάτω, για παράδειγμα:
p.center {κείμενο-ευθυγράμμιση: κέντρο; }}
Με αυτή τη γραμμή CSS, κάθε παράγραφο γραμμένη με την κεντρική τάξη θα είναι κεντραρισμένη οριζόντια μέσα στο γονικό της στοιχείο. Για παράδειγμα, αν η παράγραφος ήταν μέσα σε μια διαίρεση, που σημαίνει ότι ήταν παιδί της διαίρεσης αυτής, θα ήταν κεντραρισμένη οριζόντια μέσα στο
Ακολουθεί ένα παράδειγμα αυτής της κλάσης που εφαρμόζεται στο έγγραφο HTML:
Αυτό το κείμενο είναι κεντραρισμένο.
Όταν κεντράρετε το κείμενο με την ιδιότητα text-align, θυμηθείτε ότι θα είναι κεντραρισμένο στο στοιχείο που περιέχει και δεν είναι απαραίτητα κεντραρισμένο μέσα στην ίδια την πλήρη σελίδα. Επίσης, να θυμάστε ότι το κεντρο-αιτιολογημένο κείμενο μπορεί να είναι δύσκολο να διαβαστεί για μεγάλα τμήματα περιεχομένου, οπότε χρησιμοποιήστε αυτό το στυλ με φειδώ. Οι επικεφαλίδες και τα μικρά μπλοκ κειμένου, όπως το κείμενο του teaser για ένα άρθρο ή άλλο περιεχόμενο, συχνά είναι ευανάγνωστα και πρόστιμα όταν είναι κεντραρισμένα, αλλά μεγαλύτερα τμήματα κειμένου, όπως το ίδιο το ίδιο το άρθρο, θα ήταν δύσκολο να καταναλώσουν εάν το περιεχόμενο ήταν πλήρως κεντρικό δικαιολογημένη. Θυμηθείτε, η αναγνωσιμότητα είναι πάντα κλειδί όταν πρόκειται για κείμενο ιστοτόπου!
Κεντρικά τμήματα περιεχομένου με CSS
Τα μπλοκ είναι όλα τα στοιχεία της σελίδας σας που έχουν καθορισμένο πλάτος και δημιουργούνται ως στοιχείο στοιχειώδους στοιχείου. Πολλές φορές, αυτά τα μπλοκ δημιουργούνται χρησιμοποιώντας το στοιχείο
div.center {
περιθώριο: 0 αυτόματα.
πλάτος: 80εκ.
}}
Αυτή η συντομογραφία CSS για το περιθώριο περιουσίας θα ορίσει τα κορυφαία και τα κάτω περιθώρια σε τιμή 0, ενώ το αριστερό και το δεξί θα χρησιμοποιούν "auto". Αυτό ουσιαστικά λαμβάνει κάθε διαθέσιμο χώρο και το διαχωρίζει ομοιόμορφα μεταξύ των δύο πλευρών του παραθύρου παραθύρου προβολής, κεντράροντας ουσιαστικά το στοιχείο στη σελίδα.
Εδώ εφαρμόζεται στο HTML:
αλλά το κείμενο μέσα σε αυτό είναι αριστερά ευθυγραμμισμένο.
Όσο το μπλοκ σας έχει καθορισμένο πλάτος, θα κεντραριστεί στο εσωτερικό του στοιχείου που περιέχει. Το κείμενο που περιέχεται σε αυτό το μπλοκ δεν θα είναι κεντραρισμένο μέσα σε αυτό, αλλά θα αφεθεί δικαιολογημένο. Αυτό συμβαίνει επειδή το κείμενο είναι αριστερά-δικαιολογημένο στην προεπιλογή στα προγράμματα περιήγησης ιστού. Αν θελήσατε να επικεντρωθεί το κείμενο, μπορείτε να χρησιμοποιήσετε την ιδιότητα ευθυγράμμισης κειμένου που καλύψαμε προηγουμένως σε συνδυασμό με αυτή τη μέθοδο για να κεντράρετε τη διαίρεση.
Κεντράρισμα εικόνων με CSS
Ενώ τα περισσότερα προγράμματα περιήγησης προβάλλουν εικόνες με κεντρική χρήση με την ίδια ιδιότητα ευθυγράμμισης κειμένου που εξετάσαμε ήδη για την παράγραφο, δεν είναι καλή ιδέα να βασιστείτε στην τεχνική αυτή, καθώς δεν συνιστάται από το W3C . Δεδομένου ότι δεν συνιστάται, υπάρχει πάντα η πιθανότητα οι μελλοντικές εκδόσεις των προγραμμάτων περιήγησης να επιλέξουν να αγνοήσουν αυτή τη μέθοδο.
Αντί να χρησιμοποιήσετε την ευθυγράμμιση κειμένου για να κεντράρετε μια εικόνα, θα πρέπει να πείτε σαφώς στο πρόγραμμα περιήγησης ότι η εικόνα είναι στοιχείο σε επίπεδο μπλοκ. Με αυτόν τον τρόπο, μπορείτε να το κεντράρετε όπως θα κάνατε σε οποιοδήποτε άλλο μπλοκ. Εδώ είναι το CSS για να συμβεί αυτό:
img.center {
οθόνη: μπλοκ?
margin-left: auto;
margin-right: auto;
}}
Και εδώ είναι το HTML που για την εικόνα που θα θέλαμε να είναι κεντραρισμένο:
Μπορείτε επίσης να κεντράρετε αντικείμενα χρησιμοποιώντας CSS in-line (βλ. Παρακάτω), αλλά αυτή η προσέγγιση ΔΕΝ συστήνεται αφού προσθέτει οπτικά στυλ στη σήμανση HTML. Θυμηθείτε, θέλουμε να διαχωρίσουμε το στυλ και τη δομή, προσθέτοντας έτσι στυλ CSS στον κώδικα HTML σας με το διαχωρισμό αυτό το διαχωρισμό και, ως τέτοια, θα πρέπει να αποφεύγεται όποτε είναι δυνατόν.
Στοιχεία κεντραρίσματος κάθετα με CSS
Το κεντράρισμα των αντικειμένων κάθετα ήταν πάντα δύσκολο για το σχεδιασμό ιστοσελίδων, αλλά με την κυκλοφορία του CSS Flexible Box Layout Module στο CSS3, υπάρχει τώρα ένας τρόπος να το κάνετε.
Η κάθετη ευθυγράμμιση λειτουργεί ομοιόμορφα με την οριζόντια ευθυγράμμιση που καλύπτεται παραπάνω. Η ιδιότητα CSS είναι κάθετη ευθυγράμμιση με τη μεσαία τιμή.
.vcenter {
κατακόρυφη-ευθυγράμμιση: μεσαία?
}}
Το μειονέκτημα αυτής της προσέγγισης είναι ότι δεν είναι όλα τα προγράμματα περιήγησης που υποστηρίζουν CSS FlexBox, αν και όλο και περισσότερα έρχονται γύρω από αυτή τη νέα μέθοδο CSS layout! Στην πραγματικότητα, όλοι οι σύγχρονοι περιηγητές σήμερα υποστηρίζουν αυτό το στυλ CSS. Αυτό σημαίνει ότι οι μοναδικές σας ανησυχίες με το Flexbox θα ήταν πολύ παλιότερη έκδοση του προγράμματος περιήγησης.
Αν αντιμετωπίζετε προβλήματα με παλαιότερα προγράμματα περιήγησης, το W3C συνιστά να κεντράρετε το κείμενο κάθετα σε ένα κοντέινερ χρησιμοποιώντας την ακόλουθη μέθοδο:
- Τοποθετήστε τα στοιχεία για να είναι κεντραρισμένα μέσα σε ένα στοιχείο που περιέχει, όπως ένα div.
- Ρυθμίστε ένα ελάχιστο ύψος στο στοιχείο που περιέχει.
- Δηλώστε ότι το στοιχείο που περιέχει είναι ένα στοιχείο πίνακα.
- Ρυθμίστε την κατακόρυφη ευθυγράμμιση στο "μεσαίο".
Για παράδειγμα, εδώ είναι το CSS:
.vcenter {
min-ύψος: 12εκ.
εμφάνιση: πίνακα-κυττάρων?
κατακόρυφη-ευθυγράμμιση: μεσαία?
}}
Και εδώ είναι το HTML:
Αυτό το κείμενο είναι κεντρικά κάθετο στο πλαίσιο.
Οριζόντια κεντράρισμα και παλαιότερες εκδόσεις του Internet Explorer
Υπάρχουν μερικοί τρόποι να αναγκάσετε τον Internet Explorer (IE) να συγκεντρωθεί και στη συνέχεια να χρησιμοποιήσετε σχόλια υπό όρους, ώστε μόνο το IE να βλέπει τα στυλ, αλλά είναι λίγο verbose και άσχημο. Τα καλά νέα είναι ότι με την πρόσφατη απόφαση της Microsoft να εγκαταλείψει την υποστήριξη παλαιότερων εκδόσεων του IE, αυτά τα μη υποστηριζόμενα προγράμματα περιήγησης θα πρέπει να βγουν σύντομα, καθιστώντας έτσι ευκολότερο για τους σχεδιαστές ιστοσελίδων να χρησιμοποιούν σύγχρονες προσεγγίσεις όπως CSS FlexBox που θα κάνουν όλη τη διάταξη του CSS, όχι μόνο κεντράρισμα, πιο εύκολο για όλους τους σχεδιαστές ιστοσελίδων.