Vystredenie stĺpca pomocou Twitter Bootstrap 3

Ako môžem vycentrovať div veľkosti jedného stĺpca v rámci kontajnera (12 stĺpcov) v 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>

Chcem, aby bol div s triedou .centered vycentrovaný v rámci kontajnera. Možno použijem riadok, ak bude viac div, ale zatiaľ chcem len div s veľkosťou jedného stĺpca vycentrovaný v rámci kontajnera (12 stĺpcov).

Tiež si nie som istý, či je vyššie uvedený prístup dostatočne dobrý, pretože zámerom nie je odsadiť div o polovicu. Nepotrebujem voľné miesta mimo div a obsah div sa proporcionálne zmenší. Chcem, aby sa prázdny priestor mimo divu rovnomerne rozdelil (zmenšoval sa, až kým sa šírka kontajnera nebude rovnať jednému stĺpcu).

daaawx
Edited question 17 marec 2019 в 7:03
Programovanie
css twitter-bootstrap-3 twitter-bootstrap centering
9 august 2013 в 6:24
40 zobrazenia
Riešenie

Existujú dva prístupy k centrovaniu stĺpca <div> v Bootstrap 3:

Prístup 1 (odsadenie):

Prvý prístup využíva vlastné triedy odsadenia Bootstrap'u, takže nevyžaduje žiadnu zmenu v značkovaní a žiadne dodatočné CSS. Kľúčom je nastaviť offset rovnajúci sa polovici zostávajúcej veľkosti riadku. Takže napríklad stĺpec veľkosti 2 by sa vycentroval pridaním posunu 5, teda (12-2)/2.

V značkovaní by to vyzeralo takto:

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

Táto metóda má zjavnú nevýhodu. Funguje len pre párne veľkosti stĺpcov, takže sú podporované len .col-X-2, .col-X-4, col-X-6, col-X-8 a col-X-10.

Prístup 2 (starý prístup margin:auto)

Pomocou osvedčenej techniky margin: 0 auto; môžete vycentrovať ľubovoľnú veľkosť stĺpca. Musíte sa len postarať o plávajúce stĺpce, ktoré pridáva mriežkový systém Bootstrap'. Odporúčam definovať vlastnú triedu CSS, ako je nasledujúca:

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

Teraz ju môžete pridať do ľubovoľnej veľkosti stĺpca pri ľubovoľnej veľkosti obrazovky a bude bez problémov fungovať s responzívnym rozložením Bootstrap'u:

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

Poznámka: Pri oboch technikách by ste mohli vynechať prvok .row a mať stĺpec vycentrovaný vo vnútri prvku .container, ale v skutočnej veľkosti stĺpca by ste zaznamenali minimálny rozdiel kvôli výplni v triede kontajnera.

Aktualizácia:

Od verzie 3.0.1 má Bootstrap zabudovanú triedu s názvom center-block, ktorá používa margin: 0 auto, ale chýba float:none, môžete ju pridať do svojho CSS, aby fungovala so systémom mriežky.

Peter Mortensen
Edited answer 4 marec 2019 в 3:00
Komentáre (20)

Bootstrap 3 má teraz zabudovanú triedu pre tento .center-block

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

Ak stále používate verziu 2.X, stačí ju pridať do CSS.

Schmalzy
Edited answer 24 marec 2014 в 8:24
Komentáre (3)

Toto funguje. Pravdepodobne je to hackerský spôsob, ale funguje to dobre. Bolo to testované pre responzívne (Y).

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

Peter Mortensen
Edited answer 30 jún 2016 в 4:01
Komentáre (5)