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).
Existujú dva prístupy k centrovaniu stĺpca <div>
v Bootstrap 3:
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
.
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.
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.
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;
}