Een kolom centreren met Twitter Bootstrap 3

Hoe centreer ik een div van één kolom grootte binnen de container (12 kolommen) in 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>

Ik wil dat een div, met een class .centered gecentreerd wordt binnen de container. Ik kan een rij gebruiken als er meerdere divs zijn, maar voor nu wil ik alleen een div met de grootte van één kolom gecentreerd in de container (12 kolommen).

Ik weet ook niet zeker of de bovenstaande aanpak goed genoeg is, omdat het niet de bedoeling is om de div met de helft te verschuiven. Ik heb geen vrije ruimte nodig buiten de div en de inhoud van de div krimpt evenredig. Ik wil lege ruimte buiten de div gelijkmatig verdelen (krimpen tot de breedte van de container gelijk is aan één kolom).

daaawx
Bewerkte vraag 17de6 maart 2019 в 7:03
Programmering
css twitter-bootstrap-3 twitter-bootstrap centering
9de4 augustus 2013 в 6:24
17 views
Oplossing

Er zijn twee benaderingen voor het centreren van een kolom <div> in Bootstrap 3:

Aanpak 1 (offsets):

De eerste aanpak maakt gebruik van Bootstrap's eigen offset classes, dus het vereist geen verandering in markup en geen extra CSS. De sleutel is om een offset te zetten gelijk aan de helft van de resterende grootte van de rij. Dus bijvoorbeeld, een kolom van grootte 2 zou worden gecentreerd door een offset van 5 toe te voegen, dat's (12-2)/2.

In markup zou dit er zo uitzien:

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

Nu, er is een duidelijk nadeel aan deze methode. Het werkt alleen voor even kolomgroottes, dus alleen .col-X-2, .col-X-4, col-X-6, col-X-8, en col-X-10 worden ondersteund.

Aanpak 2 (de oude margin:auto)

Je kunt elke kolomgrootte centreren door gebruik te maken van de beproefde margin: 0 auto; techniek. Je hoeft alleen maar te zorgen voor de zwevende die wordt toegevoegd door Bootstrap's rastersysteem. Ik raad aan om een aangepaste CSS klasse te definiëren zoals de volgende:

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

Nu kun je het toevoegen aan elke kolomgrootte op elke schermgrootte, en het zal naadloos werken met Bootstrap's responsieve lay-out:

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

Note: Met beide technieken zou je het .row element kunnen overslaan en de kolom laten centreren binnen een .container, maar je zou een minimaal verschil merken in de werkelijke kolomgrootte vanwege de padding in de containerklasse.

Update:

Sinds v3.0.1 heeft Bootstrap een ingebouwde klasse genaamd center-block die margin: 0 auto gebruikt, maar float:none mist, je kunt dat toevoegen aan je CSS om het te laten werken met het grid systeem.

Peter Mortensen
Bewerkt antwoord 4de0 maart 2019 в 3:00
Commentaren (20)

Bootstrap 3 heeft nu een ingebouwde klasse voor dit .center-block

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

Als u nog steeds 2.X gebruikt, voeg dit dan toe aan uw CSS.

Schmalzy
Bewerkt antwoord 24ste0 maart 2014 в 8:24
Commentaren (3)

Dit werkt. Een hack-achtige manier waarschijnlijk, maar het werkt aardig. Het is getest op responsive (Y).

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

Peter Mortensen
Bewerkt antwoord 30ste3 juni 2016 в 4:01
Commentaren (5)