Jak vycentrovat div o velikosti jednoho sloupce v kontejneru (12 sloupců) 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>
Chci, aby byl div
s třídou .centered
vycentrován v kontejneru. Možná použiji řádek, pokud bude více div
, ale zatím chci jen div
o velikosti jednoho sloupce vycentrovaný v rámci kontejneru (12 sloupců).
Také si nejsem jistý, zda je výše uvedený přístup dostatečně dobrý, protože záměrem není odsazení div
na polovinu. Nepotřebuji volná místa mimo div
a obsah div
se úměrně zmenšuje. Chci, aby prázdné místo mimo div bylo rovnoměrně rozděleno (zmenšovat, dokud se šířka kontejneru nebude rovnat jednomu sloupci).
V nástroji Bootstrap 3 existují dva přístupy k centrování sloupce <div>
:
První přístup používá vlastní třídy odsazení nástroje Bootstrap, takže nevyžaduje žádnou změnu ve značkování ani žádné další CSS. Klíčem je nastavit odsazení rovné polovině zbývající velikosti řádku. Takže například sloupec o velikosti 2 by se vycentroval přidáním odsazení 5, tedy (12-2)/2
.
Ve značkách by to vypadalo takto:
<div class="row">
<div class="col-md-2 col-md-offset-5"></div>
</div>
Tato metoda má zjevnou nevýhodu. Funguje pouze pro sudé velikosti sloupců, takže jsou podporovány pouze .col-X-2
, .col-X-4
, col-X-6
, col-X-8
a col-X-10
.
margin:auto
)Pomocí osvědčené techniky margin: 0 auto;
můžete vycentrovat libovolnou velikost sloupce. Stačí se jen postarat o plovoucí prvky, které přidává mřížkový systém Bootstrap'. Doporučuji definovat vlastní třídu CSS, například následující:
.col-centered{
float: none;
margin: 0 auto;
}
Nyní ji můžete přidat do libovolné velikosti sloupce při libovolné velikosti obrazovky a bude bezproblémově fungovat s responzivním rozvržením Bootstrap'u:
<div class="row">
<div class="col-lg-1 col-centered"></div>
</div>
Poznámka: U obou technik byste mohli vynechat prvek .row
a mít sloupec vycentrovaný uvnitř .container
, ale kvůli výplni třídy kontejneru byste zaznamenali minimální rozdíl ve skutečné velikosti sloupce.
Aktualizace:
Od verze 3.0.1 má Bootstrap vestavěnou třídu center-block
, která používá margin: 0 auto
, ale chybí float:none
, můžete ji přidat do CSS, aby fungovala se systémem mřížky.
Bootstrap 3 má nyní vestavěnou třídu pro tento .center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
Pokud stále používáte verzi 2.X, stačí ji přidat do CSS.
Tohle funguje. Pravděpodobně je to hackerský způsob, ale funguje to dobře. Bylo to testováno pro responzivní (Y).
.centered {
background-color: teal;
text-align: center;
}