Egy oszlop központosítása a Twitter Bootstrap 3 használatával

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).

daaawx
Szerkesztett kérdés 17. március 2019 в 7:03
Programozás
css twitter-bootstrap-3 twitter-bootstrap centering
9. augusztus 2013 в 6:24
29 nézetek
Megoldás

A Bootstrap 3-ban kétféleképpen lehet központosítani egy oszlopot <div>:

1. megközelítés (eltolás):

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.

2. megközelítés (a régi 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.

Peter Mortensen
Szerkesztett válasz 4. március 2019 в 3:00
Kommentárok (20)

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.

Schmalzy
Szerkesztett válasz 24. március 2014 в 8:24
Kommentárok (3)

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;
}

Peter Mortensen
Szerkesztett válasz 30. június 2016 в 4:01
Kommentárok (5)