Sentrer en kolonne ved hjelp av Twitter Bootstrap 3

Hvordan sentrerer jeg en div med en kolonnestørrelse i beholderen (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 ha en div, med en klasse .centered for å være sentrert i beholderen. Jeg kan bruke en rad hvis det er flere div, men for nå vil jeg bare ha en div med størrelsen på en kolonne sentrert i beholderen (12 kolonner).

Jeg er heller ikke sikker på at tilnærmingen ovenfor er god nok, da hensikten ikke er å forskyve div med halvparten. Jeg trenger ikke ledig plass utenfor div og innholdet i div krymper i forhold. Jeg ønsker å tømme plass utenfor div som skal fordeles jevnt (krympe til containerbredden er lik en kolonne).

daaawx
Redigerte spørsmål 17. mars 2019 в 7:03
Programmering
css twitter-bootstrap-3 twitter-bootstrap centering
9. august 2013 в 6:24
6 visninger
Løsning

Det er to tilnærminger for å sentrere en kolonne <div> i Bootstrap 3:

tilnærming 1 (forskyvninger):

Den første tilnærmingen bruker Bootstrap&# 39s egne offset-klasser, så det krever ingen endring i markup og ingen ekstra CSS. Nøkkelen er å sette en forskyvning lik halvparten av den gjenværende størrelsen på raden. Så for eksempel vil en kolonne med størrelse 2 sentreres ved å legge til en forskyvning på 5, det vil si (12-2)/2.

I markering vil dette se slik ut:

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

Nå er det en åpenbar ulempe med denne metoden. Den fungerer bare for jevne kolonnestørrelser, så bare .col-X-2, .col-X-4, col-X-6, col-X-8 og col-X-10 støttes.

Tilnærming 2 (den gamle margin:auto).

Du kan sentrere hvilken som helst kolonnestørrelse ved å bruke den velprøvde margin: 0 auto;-teknikken. Du trenger bare å ta vare på den flytende som er lagt til av Bootstrap&# 39s rutenettsystem. Jeg anbefaler å definere en tilpasset CSS-klasse som følgende:

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

Nå kan du legge den til hvilken som helst kolonnestørrelse i hvilken som helst skjermstørrelse, og den vil fungere sømløst med Bootstraps responsive layout:

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

Merk: Med begge teknikkene kan du hoppe over .row-elementet og ha kolonnen sentrert inne i en .container, men du vil merke en minimal forskjell i den faktiske kolonnestørrelsen på grunn av utfyllingen i containerklassen.

Oppdatering:

Siden v3.0.1 Bootstrap har en innebygd klasse med navnet center-block som bruker margin: 0 auto, men mangler float:none, kan du legge det til i CSS for å få det til å fungere med rutenettsystemet.

Peter Mortensen
Redigert svar 4. mars 2019 в 3:00
Kommentarer (20)

Bootstrap 3 har nå en innebygd klasse for denne .center-blokken.

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

Hvis du fortsatt bruker 2.X, er det bare å legge til dette i CSS.

Schmalzy
Redigert svar 24. mars 2014 в 8:24
Kommentarer (3)

Dette fungerer. Sannsynligvis på en hackeraktig måte, men det fungerer fint. Det ble testet for responsiv (Y).

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

Peter Mortensen
Redigert svar 30. juni 2016 в 4:01
Kommentarer (5)