Σχεδιασμός Διατάξεων CSS - Επίπεδη και Οριζόντιες Καθορισμοί

στοιχείο κεντραρισμένο

στοιχεία κεντραρισμένα οριζόντια και κάθετα

κεντρώση στοιχείου

Για να κεντρώσετε το στοιχείο του μπλοκ (π.χ. <div>), χρησιμοποιήστε περιθώρια: auto;.

Η ρύθμιση του πλάτους του στοιχείου θα αποτρέψει την επέκτασή του στους άκρους του κουτιού.

Στη συνέχεια, το στοιχείο θα καταλαμβάνει το καθορισμένο πλάτος και το υπόλοιπο χώρος θα κατανεμηθεί ισόμετρα μεταξύ των δύο εξωτερικών περιθωρίων:

Αυτό το στοιχείο div είναι κεντραρισμένο.

Παράδειγμα

.center {
  περιθώρια: auto;
  πλάτος: 50%;
  border: 3px solid green;
  padding: 20px;
}

Προσπαθήστε το προσωπικά

Σημείωση:Αν δεν έχει ρυθμιστεί πλάτος πρόθεμα (ή το ρυθμίστε σε 100％), η κεντρώση δεν είναι έγκυρη.

κεντρώση κειμένου

Αν χρειάζεται μόνο να κεντρώσετε κείμενο εντός στοιχείου, χρησιμοποιήστε text-align: center;:

Αυτό το κείμενο είναι κεντραρισμένο.

Παράδειγμα

.center {
  text-align: center;
  border: 3px solid green;
}

Προσπαθήστε το προσωπικά

Συμβουλή:Για περισσότερους παραδείγματα πώς να κεντρώσετε κείμενο, δείτε Κείμενο CSS Αυτό το κεφάλαιο.

κεντρώση εικόνας

Για να κεντρώσετε την εικόνα, ρυθμίστε τις αριστερές και δεξιές εξωτερικές περιθώρια autoκαι να το ρυθμίσετε ως στοιχείο κεφαλίδας:}

Παράδειγμα

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

Προσπαθήστε το προσωπικά

αριστερή και δεξιά αλληλουχία - χρησιμοποιήστε position

ένας τρόπος για να ρυθμίσετε την αλληλουχία των στοιχείων είναι να χρησιμοποιήσουμε position: absolute; :

Αυτό το div είναι δεξιό κεντρικό.

Παράδειγμα

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 20px;
}

Προσπαθήστε το προσωπικά

Σημείωση:οι στοιχεία με ακριβή τοποθέτηση θα αφαιρεθούν από τη κανονική ροή και μπορεί να εμφανιστούν στοιχεία που θα επικάψουν.

αριστερή και δεξιά αλληλουχία - χρησιμοποιήστε float

ένας άλλος τρόπος για να ρυθμίσετε την αλληλουχία των στοιχείων είναι να χρησιμοποιήσουμε float Αξία:

Παράδειγμα

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

Προσπαθήστε το προσωπικά

Σημείωση:Αν ένα στοιχείο είναι ψηλότερο από το περιεχόμενο στοιχείο που το περιλαμβάνει και είναι πλούσιο, θα βγει έξω από το κουτί του. clearfix hack για να λύσουμε αυτό το πρόβλημα (δείτε τον παρακάτω παράδειγμα).

clearfix Hack

τότε μπορούμε να προσθέσουμε στον περιεχόμενο στοιχείο overflow: auto;，για να λύσουμε αυτό το πρόβλημα:

Παράδειγμα

.clearfix {
  overflow: auto;
}

Προσπαθήστε το προσωπικά

υπέρογκη σύνταξη - χρησιμοποιήστε padding

Υπάρχουν πολλά τρόποι για να ισορροπήσουμε κάθετα τα στοιχεία στο CSS. Μια απλή λύση είναι να χρησιμοποιήσουμε τις εξωτερικές χάρακες:

Είμαι κάθετα κεντρικός.

Παράδειγμα

.center {
  padding: 70px 0;
  border: 3px solid green;
}

Προσπαθήστε το προσωπικά

Για να ισορροπήσετε τόσο οριζόντια όσο και κάθετα, χρησιμοποιήστε padding και text-align: center;:

Είμαι κεντρικός οριζόντια και κάθετα.

Παράδειγμα

.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}

Προσπαθήστε το προσωπικά

υπέρογκη σύνταξη - χρησιμοποιήστε line-height

ένας άλλος τρόπος είναι να χρησιμοποιήσουμετην τιμήίση height Αξία της ιδιότητας line-height Αξία:

Είμαι κεντρικός οριζόντια και κάθετα.

Παράδειγμα

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}
/* Αν υπάρχουν πολλές γραμμές κειμένου, προσθέστε τον εξής κώδικα: */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

Προσπαθήστε το προσωπικά

υπέρογκη σύνταξη - χρησιμοποιήστε position και transform

Αν η επιλογή σας δεν είναι padding και line-height，τότε μια άλλη λύση είναι να χρησιμοποιήσουμε position και transform Αξία:

Είμαι κεντρικός οριζόντια και κάθετα.

Παράδειγμα

.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}
.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  αριστερά: 50%;
  transform: μετατρέψω(-50%, -50%);
}

Προσπαθήστε το προσωπικά

Συμβουλή:Θα μάθετε περισσότερα για το Μετατροπές 2D Σε αυτό το κεφάλαιο θα μάθετε περισσότερα για την ιδιότητα transform.

Κεντρώση κάθετου - Χρήση Flexbox

Μπορείτε επίσης να χρησιμοποιήσετε το flexbox για να κεντρώσετε το περιεχόμενο. Λάβετε υπόψη ότι το IE10 και οι προηγούμενες εκδόσεις δεν υποστηρίζουν το flexbox:

Είμαι κεντρικός οριζόντια και κάθετα.

Παράδειγμα

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green; 
}

Προσπαθήστε το προσωπικά

Συμβουλή:Θα βρείτε στο CSS Flexbox Θα μάθετε περισσότερα για το Flexbox σε αυτό το κεφάλαιο.