Υπάρχουν δύο τρόποι για να κεντράρετε τον σύνδεσμο:
- Κεντράρετε συνδέσμους στο CSS χρησιμοποιώντας το ' στοίχιση κειμένου ” ιδιοκτησία
- Κεντράρετε συνδέσμους στο CSS χρησιμοποιώντας το ' περιθώριο ” ιδιοκτησία
Σε αυτό το άρθρο, θα εξηγήσουμε και τις δύο μεθόδους για να κεντράρετε τη σύνδεση. Λοιπόν, ας ξεκινήσουμε!
Μέθοδος 1: Κέντρο συνδέσμων στο CSS με χρήση ιδιότητας στοίχισης κειμένου
Για να κεντράρουμε τους συνδέσμους σε HTML, θα χρησιμοποιήσουμε το ' στοίχιση κειμένου ” ιδιοκτησία του CSS. Ο ' στοίχιση κειμένου Η ιδιότητα στο CSS χρησιμοποιείται για την προσαρμογή της στοίχισης του κειμένου όπως αριστερά, δεξιά, κέντρο και αιτιολόγηση της στοίχισης.
Σύνταξη
Η σύνταξη της ιδιότητας text-align είναι:
στοίχιση κειμένου : αξία
Στη θέση του « αξία ”, μπορείτε να ορίσετε τη στοίχιση κειμένου όπως αριστερά, δεξιά, στο κέντρο και να δικαιολογήσετε.
Τώρα, θα χρησιμοποιήσουμε το ' στοίχιση κειμένου ” για να ευθυγραμμίσετε στο κέντρο τους δεδομένους συνδέσμους.
Παράδειγμα
Για να κεντράρουμε έναν σύνδεσμο σε μια ιστοσελίδα, θα προσθέσουμε έναν σύνδεσμο σε HTML μέσα στην ετικέτα
. Για να το κάνετε αυτό, χρησιμοποιήστε την ετικέτα για να ορίσετε έναν υπερσύνδεσμο και να δώσετε τη διεύθυνση του απαιτούμενου ιστότοπου. Μετά από αυτό, καθορίστε το όνομα του συνδέσμου. Στην περίπτωσή μας, έχουμε προσθέσει τον σύνδεσμο στον ιστότοπό μας στο Linuxhint.HTML
< σώμα >< ένα href = “https://linuxhint.com/” > Linux < / ένα >
< / σώμα >
Η παρακάτω εικόνα υποδεικνύει ότι έχει προστεθεί ο σύνδεσμος που είναι τοποθετημένος στην αριστερή πλευρά από προεπιλογή:
Τώρα μετακινηθείτε στο CSS για να κεντράρετε τον σύνδεσμο.
Εδώ, θα χρησιμοποιήσουμε ' ένα ” για πρόσβαση στον σύνδεσμο που προστέθηκε. Μετά από αυτό, ορίστε την τιμή του text-align ως ' κέντρο ' και εμφανίζεται ως ' ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ '. Ως αποτέλεσμα, το στοιχείο θα προστεθεί ως στοιχείο μπλοκ, ξεκινώντας από μια νέα γραμμή και καταλαμβάνοντας ολόκληρο το πλάτος.
CSS
ένα {στοίχιση κειμένου : κέντρο ;
απεικόνιση : ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ ;
}
Σημείωση: Η ιδιότητα στοίχισης κειμένου CSS δεν λειτουργεί μόνη της για να κεντράρει την ετικέτα. Επομένως, πρέπει να χρησιμοποιήσετε το « απεικόνιση 'ιδιότητα και ορίστε την αξία της' ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ ” για να κεντράρετε τον σύνδεσμο.
Τώρα, μεταβείτε στο HTML και εκτελέστε το για να δείτε το ακόλουθο αποτέλεσμα. Εδώ, μπορείτε να δείτε ότι ο σύνδεσμος είναι ευθυγραμμισμένος στο κέντρο της ιστοσελίδας:
Ας περάσουμε στη δεύτερη μέθοδο για να ευθυγραμμίσουμε τον σύνδεσμο στο κέντρο.
Μέθοδος 2: Κεντράρετε συνδέσμους στο CSS χρησιμοποιώντας την ιδιότητα 'margin'.
Στο CSS, το ' περιθώριο 'η ιδιοκτησία χρησιμοποιείται για να κεντράρει τη σύνδεση. Είναι η συντομογραφία του ' περιθώριο-αριστερά », « περιθώριο-δεξιά », « περιθώριο-κορυφή ', και ' περιθώριο-κάτω ' ιδιότητες. Μπορείτε να ορίσετε τις τιμές όλων των δεδομένων ιδιοτήτων σε μία μόνο γραμμή.
Σύνταξη
Η σύνταξη της ιδιότητας περιθωρίου είναι:
περιθώριο : αυτο | μπλουζα σωστά κάτω μέρος αριστεράΗ περιγραφή της σύνταξης που παρέχεται παραπάνω δίνεται παρακάτω:
- αυτο: Χρησιμοποιείται για τη ρύθμιση στοιχείων σύμφωνα με το πρόγραμμα περιήγησης.
- μπλουζα: Χρησιμοποιείται για να ορίσετε το περιθώριο από την κορυφή.
- σωστά: Χρησιμοποιείται για να ορίσετε το περιθώριο από τα δεξιά.
- κουμπί: Χρησιμοποιείται για να ορίσετε το περιθώριο από το κάτω μέρος.
- αριστερά: Χρησιμοποιείται για να ορίσετε το περιθώριο από τα αριστερά.
Σημείωση: Ο καθορισμός δύο τιμών θα σημαίνει το περιθώριο από πάνω και κάτω και το περιθώριο από αριστερά και δεξιά. Ωστόσο, εάν προστεθεί μία τιμή, το περιθώριο θα εφαρμοστεί και στις τέσσερις πλευρές.
Ας περάσουμε στο παράδειγμα, όπου θα κεντράρουμε έναν σύνδεσμο χρησιμοποιώντας το « περιθώριο ” ιδιοκτησία.
Παράδειγμα
Αρχικά ορίστε την τιμή της ιδιότητας εμφάνισης ως ' ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ 'και το πλάτος ως ' 70 εικονοστοιχεία '. Μετά από αυτό, εφαρμόστε την ιδιότητα περιθωρίου και ορίστε την τιμή του σε ' αυτο ”:
ένα {απεικόνιση : ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ ;
πλάτος : 70 εικονοστοιχεία ;
περιθώριο : αυτο ;
}
Σημείωση: Ο ' απεικόνιση ' και ' πλάτος ” Η ιδιότητα είναι απαραίτητη για να ορίσετε. διαφορετικά, το « περιθώριο «Το ακίνητο δεν θα λειτουργήσει. Η τιμή της ιδιότητας πλάτους μπορεί να οριστεί ανάλογα με την ανάλυση της οθόνης εμφάνισης και το μήκος του κειμένου.
Μπορείτε να δείτε από τη δεδομένη εικόνα ότι ο σύνδεσμος έχει κεντραριστεί με επιτυχία:
Αυτό είναι! Εξηγήσαμε τις μεθόδους για να κεντράρουμε τον σύνδεσμο.
συμπέρασμα
Ο ' στοίχιση κειμένου ' και ' περιθώριο Η ιδιότητα χρησιμοποιείται για να κεντράρει τον σύνδεσμο με τη συνεισφορά του απεικόνιση ' και ' πλάτος ” ιδιοκτησία. Η ιδιότητα εμφάνισης είναι απαραίτητη μαζί με την ιδιότητα στοίχισης κειμένου, ενώ χρησιμοποιώντας την ιδιότητα περιθωρίου, τόσο οι ιδιότητες εμφάνισης όσο και οι ιδιότητες πλάτους είναι υποχρεωτικές για το κέντρο του συνδέσμου. Αυτός ο οδηγός έχει συζητήσει διάφορες μεθόδους για να κεντράρετε μια σύνδεση στο CSS.