Κεντράρετε μια στήλη χρησιμοποιώντας το Twitter Bootstrap 3

Πώς μπορώ να κεντράρω ένα div μεγέθους μιας στήλης μέσα στο δοχείο (12 στήλες) στο [Twitter Bootstrap 3][1];

daaawx
Επεξεργασμένη ερώτηση Κάνε Μάρτιος 2019 в 7:03
Προγραμματισμός
css twitter-bootstrap-3 twitter-bootstrap centering
Κάνε Αύγουστος 2013 в 6:24
18 προβολές
Λύση

Υπάρχουν δύο προσεγγίσεις για το κεντράρισμα μιας στήλης <div> στο Bootstrap 3:

Πρόσβαση 1 (μετατοπίσεις):

Η πρώτη προσέγγιση χρησιμοποιεί τις ίδιες κλάσεις offset του Bootstrap'έτσι δεν απαιτεί καμία αλλαγή στο markup και κανένα επιπλέον CSS. Το κλειδί είναι να ορίσετε μια μετατόπιση ίση με το μισό του υπόλοιπου μεγέθους της γραμμής. Έτσι, για παράδειγμα, μια στήλη μεγέθους 2 θα κεντραριστεί προσθέτοντας μια μετατόπιση 5, δηλαδή (12-2)/2.

Σε σήμανση αυτό θα έμοιαζε ως εξής:

<div class="row">
    <div class="col-md-2 col-md-offset-5"></div>
</div>

Τώρα, υπάρχει ένα προφανές μειονέκτημα για αυτή τη μέθοδο. Δουλεύει μόνο για ζυγά μεγέθη στηλών, οπότε υποστηρίζονται μόνο τα .col-X-2, .col-X-4, col-X-6, col-X-8 και col-X-10.

Προσέγγιση 2 (το παλιό margin:auto)

Μπορείτε να κεντράρετε οποιοδήποτε μέγεθος στήλης χρησιμοποιώντας την αποδεδειγμένη τεχνική margin: 0 auto;. Απλά πρέπει να φροντίσετε για το floating που προστίθεται από το σύστημα πλέγματος του Bootstrap's. Συνιστώ να ορίσετε μια προσαρμοσμένη κλάση CSS όπως η ακόλουθη:

.col-centered{
    float: none;
    margin: 0 auto;
}

Τώρα μπορείτε να το προσθέσετε σε οποιοδήποτε μέγεθος στήλης σε οποιοδήποτε μέγεθος οθόνης και θα λειτουργεί απρόσκοπτα με την responsive διάταξη του Bootstrap's:

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

Σημείωση: Και με τις δύο τεχνικές θα μπορούσατε να παραλείψετε το στοιχείο .row και να έχετε τη στήλη κεντραρισμένη μέσα σε ένα .container, αλλά θα παρατηρούσατε μια ελάχιστη διαφορά στο πραγματικό μέγεθος της στήλης λόγω του padding στην κλάση container.

Peter Mortensen
Επεξεργασμένη απάντηση Κάνε Μάρτιος 2019 в 3:00
Σχόλια (20)

Το Bootstrap 3 έχει τώρα μια ενσωματωμένη κλάση για αυτό το .center-block

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Αν εξακολουθείτε να χρησιμοποιείτε την έκδοση 2.X, τότε απλά προσθέστε αυτό στο CSS σας.

Schmalzy
Επεξεργασμένη απάντηση Κάνε Μάρτιος 2014 в 8:24
Σχόλια (3)

Αυτό λειτουργεί. Πιθανόν να είναι λίγο δύσκολο, αλλά δουλεύει ωραία. Δοκιμάστηκε για responsive (Y).

.centered {
    background-color: teal;
    text-align: center;
}

Peter Mortensen
Επεξεργασμένη απάντηση Κάνε Ιούνιος 2016 в 4:01
Σχόλια (5)