Centrer en kolonne ved hjælp af Twitter Bootstrap 3

Hvordan centrerer jeg en div med en kolonne størrelse i containeren (12 kolonner) i Twitter Bootstrap 3?

.centered {
  background-color: red;
}
<body class="container">
  <div class="col-lg-1 col-offset-6 centered">
    <img data-src="holder.js/100x100" alt="" />
  </div>
</body>

Jeg vil have en div, med en klasse .centered, til at være centreret i containeren. Jeg kan bruge en række, hvis der er flere diver, men indtil videre vil jeg bare have en div med størrelsen af en kolonne centreret i containeren (12 kolonner).

Jeg er heller ikke sikker på at ovenstående fremgangsmåde er god nok, da det ikke er meningen at diven skal forskydes med halvdelen. Jeg har ikke brug for frie rum uden for div og indholdet af div krymper proportionalt. Jeg vil have frit rum uden for div'en til at være jævnt fordelt (krympe indtil containerbredden er lig med en kolonne).

daaawx
Redigeret spørgsmål 2019ør marts 2019 в 7:03
Programmering
css twitter-bootstrap-3 twitter-bootstrap centering
2013ør august 2013 в 6:24
58 visninger
Løsning

Der er to måder at centrere en kolonne <div> på i Bootstrap 3:

tilgang 1 (forskydninger):

Den første metode bruger Bootstraps egne offset-klasser, så den kræver ingen ændringer i markup og ingen ekstra CSS. Nøglen er at indstille en offset svarende til halvdelen af den resterende størrelse af rækken. Så for eksempel vil en kolonne af størrelse 2 blive centreret ved at tilføje en forskydning på 5, det vil sige (12-2)/2.

I markup ville det se sådan ud:

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

Der er en åbenlys ulempe ved denne metode. Den virker kun for lige kolonnestørrelser, så kun .col-X-2, .col-X-4, col-X-6, col-X-8 og col-X-10 understøttes.

Metode 2 (den gamle margin:auto)

Du kan centrere enhver kolonnestørrelse ved at bruge den velprøvede teknik margin: 0 auto;. Du skal bare tage dig af den flydende, der tilføjes af Bootstrap's grid-system. Jeg anbefaler, at du definerer en brugerdefineret CSS-klasse som den følgende:

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

Nu kan du tilføje den til enhver kolonnestørrelse på enhver skærmstørrelse, og det vil fungere problemfrit med Bootstrap's responsive layout:

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

Note: Med begge teknikker kan du springe .row-elementet over og have kolonnen centreret inde i en .container, men du vil bemærke en minimal forskel i den faktiske kolonnestørrelse på grund af polstringen i containerklassen.

opdatering:

Siden v3.0.1 Bootstrap har en indbygget klasse ved navn center-block, der bruger margin: 0 auto, men mangler float:none, så du kan tilføje den til din CSS for at få den til at fungere med gitter-systemet.

Peter Mortensen
Redigeret svar 2019ør marts 2019 в 3:00
Kommentarer (20)

Bootstrap 3 har nu en indbygget klasse til denne .center-block

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

Hvis du stadig bruger 2.X, skal du blot tilføje dette til din CSS.

Schmalzy
Redigeret svar 2014ør marts 2014 в 8:24
Kommentarer (3)

Det virker. Det er nok en hackish måde, men det virker fint. Den blev testet for responsive (Y).

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

Peter Mortensen
Redigeret svar 2016ør juni 2016 в 4:01
Kommentarer (5)