Style Sheets Ιστού
CSS συμβουλές και κόλπα

(Αυτή η σελίδα χρησιμοποιεί CSS style sheets)

Το παρόν έγγραφο είναι μετάφραση του άρθρου «Cascading Style Sheets. CSS tips & tricks».
Αυθεντική εκδοχή του εγγράφου βρίσκεται μόνο στην ιστοσελίδα W3C www.w3.org/Style/Examples/007/center
Η παρούσα μετάφραση ΔΕΝ είναι επίσημο έγγραφο της W3C.
Όλα τα κοπιράιτ ανήκουν στη W3C.
Το παρόν έγγραφο μπορεί να έχει λάθη της μετάφρασης και εσφαλμένη εκτύπωση.
Συγγραφέας: Dimitris Papadopoulos Το έγγραφο μεταφράστηκε με υποστήριξη: ιστοσελιδα

Γραμμές

Μπλοκς

Κάθετα

Επίδειξη

Κεντράροντας τα πράγματα

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

Κεντράρισμα γραμμών κειμένου

Το πιο κοινό και (άρα) ευκολότερο είδος κεντραρίσματος είναι αυτό των γραμμών κειμένου σε μια παράγραφο ή επικεφαλίδα. CSS έχει την εντολή 'text-align' γιαυτό:

P { text-align: center }
H2 { text-align: center }

καθιστά κάθε γραμμή σε ένα Ρ ή ένα Η2 κεντραρισμένη μεταξύ των περιθωρίων της, κάπως έτσι:

Οι γραμές σε αυτήν την παράγραφο είναι όλες κεντραρισμένες μεταξύ των περιθωρίων της παραγράφου, χάριν στην αξία 'center' της CSS εντολής 'text-align'.

Κεντράρισμα ενός μπλοκ ή μιας εικόνας

Μερικές φορές δεν είναι το κείμενο αυτό που πρέπει να κεντραριστεί, αλλά ολόκληρο το μπλοκ. Ή, για να ειπωθεί διαφορετικά: εμείς θέλουμε το αριστερό και δεξί περιθώριο να είναι ίσα. Ο τρόπος για να το κάνουμε αυτό είναι να ορίσουμε τα περιθώρια στο 'auto'. Αυτό κανονικά χρησιμοποιείται σε μπλοκ με σταθερό πλάτος, γιατί αν το ίδιο το μπλοκ είναι ευμετάβλητο, αυτό θα πάρει όλο το διαθέσιμο πλάτος. Εδώ είναι ένα παράδειγμα:

P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 6em
}
...
<P class="blocktext">This rather...

Αυτό το μάλλον στενό μπλοκ κειμένου είναι κεντραρισμένο. Σημειωτέων πως οι γραμμές μέσα στο μπλοκ δεν είναι κεντραρισμένες (είναι αριστερά ζυγισμένες), σε αντίθεση με το προηγούμενο παράδειγμα.

Αυτός είναι επίσης ο τρόπος για να κεντραριστεί μια εικόνα: μετατρέποντάς την σε μπλοκ και εφαρμόζοντας τις ιδιότητες του περιθορίου σε αυτό. Για παράδειγμα:

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">

Το επόμενο εικόνα είναι κεντραρισμένο: some random image

Κεντράροντας κάθετα

Το CSS επιπέδου 2 δεν έχει την ικανότητα να κεντράρει τα πράγματα κάθετα. Μπορεί ίσως να υπάρξει στο CSS επιπέδου 3. Ακόμα όμως και στο CSS2 μπορείτε να κεντράρετε μπλοκς κάθετα με τον συνδυασμό μερικών ιδιοτήτων. Το κόλπο είναι να καθορίσετε πως το εξωτερικό μπλοκ θα φορμαριστεί σαν κελί πίνακα, επειδή τα περιεχόμενα ενός κελιού πίνακα μπορούν να κεντραριστούν κάθετα.

Το παρακάτω παράδειγμα κεντράρει μια παράγραφο μέσα σε ένα μπλοκ το οποίο έχει κάποιο δεδομένο ύψος. Ένα ξεχωριστό παράδειγμα δείχνει μια παράγραφο που είναι κεντραρισμένη κάθετα σε ένα παράυθρου πλοηγού, επειδή είναι μέσα σε ένα μπλοκ το οποίο είναι απόλυτα τοποθετημένο και τόσο ψηλό όσο το παράθυρο.

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
<DIV class="container">
  <P>This small paragraph...
</DIV>

Αυτή η μικρή παράγραφος έιναι κεντραρισμένη κάθετα.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
Δημιουργία 5 May 2001;
Τελευταία ανανέωση $Date: 2008/01/11 18:26:30 $ GMT