Η τοποθέτηση αντικειμένων σε μια ιστοσελίδα είναι απαραίτητη για το γενικό σχεδιασμό της. Παρόλο που υπάρχουν άλλοι τρόποι για να επηρεάσετε τη διάταξη, όπως για να χρησιμοποιήσετε πίνακες ( οι οποίοι δεν συνιστούμε ), το καλύτερο είναι να χρησιμοποιήσετε το CSS .
Παρακάτω, θα ρίξουμε μια ματιά στο πώς να χρησιμοποιήσουμε μια απλή ιδιότητα γραμμής CSS σε γραμμή για την ευθυγράμμιση εικόνων, πινάκων, παραγράφων και πολλά άλλα.
Σημείωση: Αυτές οι ίδιες μέθοδοι μπορούν επίσης να χρησιμοποιηθούν σε εξωτερικά φύλλα στυλ, αλλά επειδή αυτά ισχύουν για μεμονωμένα αντικείμενα και πιθανόν να χρειαστεί να παραμείνουν με αυτόν τον τρόπο, είναι καλύτερο να χρησιμοποιήσετε in-line styling όπως αυτό που αναφέρεται παρακάτω.
Ευθυγράμμιση των παραγράφων κειμένου
Η ετικέτα παραγράφου είναι η πρώτη θέση για να ξεκινήσετε να σχεδιάζετε την ιστοσελίδα σας. Το άνοιγμα και το κλείσιμο ετικετών μοιάζουν με αυτό:
Η προεπιλεγμένη ευθυγράμμιση του κειμένου σε μια παράγραφο βρίσκεται στην αριστερή πλευρά της σελίδας, αλλά μπορείτε επίσης να ευθυγραμμίσετε τις παραγράφους σας στα δεξιά και στο κέντρο.
>
Χρησιμοποιώντας την ιδιότητα float, μπορείτε να ευθυγραμμίσετε παραγράφους προς τα δεξιά ή προς τα αριστερά του γονικού στοιχείου. Οποιαδήποτε άλλα στοιχεία μέσα σε αυτό το γονικό στοιχείο θα ρέουν γύρω από το επιπλωμένο στοιχείο.
Για να έχετε το καλύτερο αποτέλεσμα με μια παράγραφο, είναι καλύτερο να ορίσετε ένα πλάτος στην παράγραφο που είναι μικρότερη από το στοιχείο container (γονικό).
Ευθυγραμμίστε το κείμενο μέσα στις παραγράφους
Αναμφισβήτητα, η πιο ενδιαφέρουσα ευθυγράμμιση για το κείμενο της παραγράφου είναι "δικαιολογήστε", η οποία λέει στο πρόγραμμα περιήγησης να εμφανίζει το κείμενο ευθυγραμμισμένο, ουσιαστικά, τόσο στη δεξιά όσο και στην αριστερή πλευρά του παραθύρου.
Για να δικαιολογήσετε το κείμενο σε μια παράγραφο, θα χρησιμοποιήσατε την ιδιότητα text-align.
Μπορείτε επίσης να ευθυγραμμίσετε όλο το κείμενο μέσα σε μια παράγραφο στη δεξιά ή την αριστερή πλευρά (την προεπιλογή), χρησιμοποιώντας την ιδιότητα align-text.
Η ιδιότητα "ευθυγράμμιση κειμένου" θα ευθυγραμμίσει το κείμενο μέσα στο στοιχείο. Από τεχνικής απόψεως, δεν υποτίθεται ότι ευθυγραμμίζονται οι εικόνες που περιέχονται μέσα στην παράγραφο ή σε άλλο στοιχείο, αλλά τα περισσότερα προγράμματα περιήγησης αντιμετωπίζουν τις εικόνες ως ενσωματωμένες για αυτήν την ιδιότητα.
Ευθυγράμμιση εικόνων
Χρησιμοποιώντας την ιδιότητα float σε μια ετικέτα εικόνας μπορείτε να ορίσετε την τοποθέτηση των εικόνων στη σελίδα και πώς θα περιτυλιχθεί το κείμενο γύρω από αυτές.
Ακριβώς όπως και οι παραπάνω παράγραφοι, η ιδιότητα στυλ πλωτήρα στην ετικέτα εικόνας θα τοποθετήσει την εικόνα σας στη σελίδα και θα ενημερώσει το πρόγραμμα περιήγησης σχετικά με το πώς θα κυκλοφορούν κείμενο και άλλα στοιχεία γύρω από αυτήν την εικόνα.
Το κείμενο που ακολουθεί την παραπάνω ετικέτα εικόνας θα ρέει γύρω από την εικόνα προς τα δεξιά καθώς η εικόνα εμφανίζεται στα αριστερά της οθόνης.
Αν θέλω να σταματήσει να περιτυλίσσεται το κείμενο γύρω από την εικόνα, χρησιμοποιώ την καθαρή ιδιότητα:
Ευθυγράμμιση περισσότερων από τις παραγράφους
Ωστόσο, τι γίνεται αν θέλετε να ευθυγραμμίσετε κάτι περισσότερο από μια παράγραφο ή μια εικόνα; Θα μπορούσατε απλά να τοποθετήσετε μια ιδιότητα στυλ σε κάθε παράγραφο, αλλά υπάρχει μια ετικέτα που μπορείτε να χρησιμοποιήσετε που είναι πιο αποτελεσματική:
Απλά περιβάλλετε το κείμενο και τις εικόνες (συμπεριλαμβανομένων των ετικετών HTML ) με την ετικέτα και την ιδιότητα στυλ (float ή text-align) και όλα σε αυτό το τμήμα θα ευθυγραμμιστούν με τον τρόπο που θα θέλατε.
Λάβετε υπόψη ότι οι ευθυγραμμίσεις που προστίθενται στις παραγράφους ή τις εικόνες εντός της κατηγορίας θα γίνονται σεβαστές, παρακάμπτοντας την ετικέτα.