Een kolom centreren met Twitter Bootstrap 3

Antwoord 1, autoriteit 100%

Er zijn twee manieren om een ​​kolom <div>te centreren in Bootstrap 3:

Benadering 1 (offsets):

De eerste benadering gebruikt de eigen offset-klassen van Bootstrap, dus er zijn geen wijzigingen in de opmaak en geen extra CSS vereist. De sleutel is om een offset in te stellen die gelijk is aan de helft van de resterende grootte van de rij. Een kolom met grootte 2 wordt bijvoorbeeld gecentreerd door een offset van 5 toe te voegen, dat is (12-2)/2.

In opmaak zou dit er als volgt uitzien:

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

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-8en col-X-10worden ondersteund.

Benadering 2 (de oude margin:auto)

Je kunt elke kolomgrootte centrerenmet behulp van de beproefde margin: 0 auto;techniek. Je hoeft alleen maar te zorgen voor het zweven dat wordt toegevoegd door het rastersysteem van Bootstrap. Ik raad aan om een ​​aangepaste CSS-klasse als volgt te definiëren:

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

Je kunt het nu aan elke kolomgrootte op elke schermgrootte toevoegen en het werkt naadloos samen met de responsieve lay-out van Bootstrap:

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

Opmerking:Met beide technieken zou je het .rowelement kunnen overslaan en de kolom gecentreerd hebben in een .container, maar dat zou je opmerken een minimaal verschil in de werkelijke kolomgrootte vanwege de opvulling in de containerklasse.

Bijwerken:

Sinds v3.0.1 heeft Bootstrap een ingebouwde klasse met de naam center-blockdie margin: 0 autogebruikt, maar float:none, je kunt dat toevoegen aan je CSS om het te laten werken met het rastersysteem.

Antwoord 2, autoriteit 15%

De voorkeursmethode voor het centreren van kolommenis het gebruik van “offsets” (dwz: col-md-offset-3)

Bootstrap 3.x centreervoorbeelden

Voor centrerende elementenis er een center-blockhelperklasse.

U kunt ook text-centergebruiken om tekst te centreren(en inline-elementen).

Responsieve demo: http://bootply.com/91632

EDIT– Zoals vermeld in de opmerkingen, werkt center-blockop kolominhoud en display:blockelementen, maar werkt niet op de kolom zelf (col-*divs) omdat Bootstrap floatgebruikt.

Update 2020

Nu met Bootstrap 4zijn de centrering-methoden veranderd..

• text-centerwordt nog steeds gebruikt voor display:inlineelementen
• mx-autovervangt center-blockom display:blockelementen te centreren
• offset-*ofmx-autokan worden gebruikt om rasterkolommen te centreren

mx-auto(auto x-as marges) centreert display:blockof display:flexelementen die een hebben gedefinieerde breedte, (%, vw, px, enz..). Flexbox wordt standaard gebruiktop rasterkolommen, dus er zijn ook verschillende flexbox-centreringsmethoden.

DemoBootstrap 4 horizontaal centreren

Voor verticaal centreren in BS4 ziehttps://stackoverflow.com/a/41464397/171456

Antwoord 3, autoriteit 5%

Nu werkt Bootstrap 3.1.1 met .center-block, en deze helperklasse werkt met het kolomsysteem.

Bootstrap 3 Helper Class Center.

Bekijk deze jsfiddle-DEMO:

<div class="container">
    <div class="row">
        <div class="center-block">row center-block</div>
    </div>
    <div class="row">
        <div class="col-md-6 brd">
            <div class="center-block">1 center-block</div>
        </div>
        <div class="col-md-6 brd">
            <div class="center-block">2 center-block</div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-2 col-center-block">row col-xs-2 col-center-block</div>
</div>

Rijkolomcentrum met behulp van col-center-blockhelperklasse.

.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}

Antwoord 4, autoriteit 3%

Voeg eenvoudig het volgende toe aan uw aangepaste CSS-bestand. Het rechtstreeks bewerken van Bootstrap CSS-bestanden wordt niet aanbevolen en annuleert uw mogelijkheid om een ​​CDNte gebruiken.

.center-block {
    float: none !important
}

Waarom?

Bootstrap CSS (versie 3.7 en lager) gebruikt marge: 0 auto;, maar wordt overschreven door de float-eigenschap van de groottecontainer.

PS:

Vergeet niet de lessen in de juiste volgorde in te stellen nadat je deze les hebt toegevoegd.

<div class="col-md-6 center-block">Example</div>

Antwoord 5, autoriteit 2%

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

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

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

Antwoord 6, autoriteit 2%

Mijn benadering van middelste kolommen is om display: inline-blockte gebruiken voor kolommen en text-align: centervoor de bovenliggende container.

Je hoeft alleen de CSS-klasse ‘gecentreerd’ toe te voegen aan de row.

HTML:

<div class="container-fluid">
  <div class="row centered">
    <div class="col-sm-4 col-md-4">
        Col 1
    </div>
    <div class="col-sm-4 col-md-4">
        Col 2
    </div>
    <div class="col-sm-4 col-md-4">
        Col 3
    </div>
  </div>
</div>

CSS:

.centered {
   text-align: center;
   font-size: 0;
}
.centered > div {
   float: none;
   display: inline-block;
   text-align: left;
   font-size: 13px;
}

JSFiddle:http://jsfiddle.net/steifffi/ug4fzcjd/

Antwoord 7

Bootstrapversie 3 heeft een .text-center klasse.

Voeg gewoon deze klas toe:

text-center

Het laadt gewoon deze stijl:

.text-center {
    text-align: center;
}

Voorbeeld:

<div class="container-fluid">
  <div class="row text-center">
     <div class="col-md-12">
          Bootstrap 4 is coming....
      </div>
  </div>
</div>   

Antwoord 8

Met Bootstrap v3 en v4 kan dit worden bereikt door .justify-content-centertoe te voegen aan de .row<div>

<div class="row justify-content-center">
    <div class="col-1">centered 1 column</div>
</div>

https://getbootstrap.com/docs/4.0/utilities/ flex/#justify-content

Antwoord 9

Dit werkt. Een hackachtige manier waarschijnlijk, maar het werkt goed. Het is getest op responsief (Y).

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

Antwoord 10

Met bootstrap 4 kun je eenvoudig justify-content-md-centerproberen zoals het wordt genoemd hier

<div class="container">
    <div class="row justify-content-md-center">
        <div class="col col-lg-2">
              1 of 3
        </div>
        <div class="col-md-auto">
            Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
    <div class="row">
        <div class="col">
             1 of 3
        </div>
        <div class="col-md-auto">
                Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
</div>

Antwoord 11

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <img src="some.jpg">
        </div>
    </div>
</div>

Antwoord 12

Probeer dit

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

Je kunt ook andere colgebruiken, zoals col-md-2, enz.

Antwoord 13

Ik stel voor om gewoon de klasse text-centerte gebruiken:

<body class="container">
    <div class="col-md-12 text-center">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

Antwoord 14

Probeer deze code.

<body class="container">
    <div class="col-lg-1 col-lg-offset-10">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

Hier heb ik col-lg-1 gebruikt en de offset zou 10 moeten zijn voor een goed gecentreerde div op grote apparaten. Als je het nodig hebt om op middelgrote tot grote apparaten te centreren, verander dan gewoon de lg in md enzovoort.

Antwoord 15

Gebruik mx-autoin uw div-klasse met Bootstrap 4.

<div class="container">
  <div class="row">
    <div class="mx-auto">
      You content here
    </div>
  </div>
</div>

Antwoord 16

<div class="container">
    <div class="row row-centered">
        <div class="col-xs-6 col-centered">Column 6</div>
        <div class="col-xs-6 col-centered">Column 6</div>
        <div class="col-xs-3 col-centered">Column 3</div>
        <div class="col-xs-3 col-centered">Column 3</div>
        <div class="col-xs-3 col-centered">Column 3</div>
    </div>
</div>

CSS

/* centered columns styles */
.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
    text-align: center;
    background-color: #ccc;
    border: 1px solid #ddd;
}