Hogyan lehet egy egy oszlop méretű div-et a konténerben (12 oszlop) a Twitter Bootstrap 3-ban központosítani?
.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>
Azt szeretném, hogy egy div
, egy .centered
osztályú .centered
legyen a konténerben középen. Lehet, hogy egy sort használok, ha több div
van, de most csak egy div
-t akarok, amelynek mérete egy oszlop méretű, a konténerben (12 oszlop) középre helyezve.
Abban sem vagyok biztos, hogy a fenti megközelítés elég jó, mivel a szándék nem az, hogy a div
-t a felével eltoljam. Nincs szükségem szabad helyekre a div
-n kívül, és a div
tartalma arányosan zsugorodik. Azt akarom, hogy a div-n kívüli üres hely egyenletesen legyen elosztva (addig zsugorodjon, amíg a konténer szélessége egy oszlopnak megfelelő nem lesz).
A Bootstrap 3-ban kétféleképpen lehet központosítani egy oszlopot <div>
:
Az első megközelítés a Bootstrap'saját eltolási osztályait használja, így nem igényel változtatást a jelölésben és nem igényel extra CSS-t. A kulcs az, hogy a sor fennmaradó méretének felével megegyező eltolás. Így például egy 2 méretű oszlopot 5 offset hozzáadásával központosítunk, azaz (12-2)/2
.
Markupban ez így nézne ki:
<div class="row">
<div class="col-md-2 col-md-offset-5"></div>
</div>
Nos, ennek a módszernek van egy nyilvánvaló hátránya. Kizárólag páros oszlopméretek esetén működik, így csak a .col-X-2
, .col-X-4
, col-X-6
, col-X-8
és col-X-10
oszlopok támogatottak.
margin:auto
) A bevált margin: 0 auto;
technikával minden oszlopméretet középpontosíthatsz**. Csak a Bootstrap's rácsrendszer által hozzáadott lebegésről kell gondoskodnia. Javaslom egy egyéni CSS osztály definiálását, mint például a következő:
.col-centered{
float: none;
margin: 0 auto;
}
Most már bármilyen képernyőméretnél bármilyen oszlopmérethez hozzáadhatod, és zökkenőmentesen fog működni a Bootstrap's reszponzív elrendezéssel:
<div class="row">
<div class="col-lg-1 col-centered"></div>
</div>
Megjegyzés: Mindkét technikával kihagyhatod a .row
elemet, és az oszlopot egy .container
elemen belül középre helyezheted, de minimális különbséget vehetsz észre a tényleges oszlopméretben a konténer osztályban lévő kitöltés miatt.
Frissítés:
Mivel a v3.0.1 Bootstrap rendelkezik egy beépített center-block
nevű osztállyal, amely margin: 0 auto
-t használ, de hiányzik belőle a float:none
, ezt hozzáadhatod a CSS-edhez, hogy működjön a rácsrendszerrel.
Bootstrap 3 most már van egy beépített osztálya ennek a .center-block
-nak
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
Ha még mindig a 2.X-et használod, akkor csak add hozzá ezt a CSS-edhez.
Ez működik. Valószínűleg eléggé hacker módon, de szépen működik. Teszteltük a reszponzív (Y).
.centered {
background-color: teal;
text-align: center;
}