Kaip išcentruoti vieno stulpelio dydžio divą konteineryje (12 stulpelių) 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>
Noriu, kad div
su klase .centered
būtų centruotas konteineryje. Galiu naudoti eilutę, jei yra keli div
, bet kol kas noriu tik vieno stulpelio dydžio div
, centruoto konteineryje (12 stulpelių).
Taip pat nesu tikras, ar pirmiau aprašytas metodas yra pakankamai geras, nes nesiekiama, kad div
būtų per pusę atitrauktas. Man nereikia laisvų tarpų už div
ribų, o div
turinys mažėja proporcingai. Noriu, kad tuščia erdvė už div'o ribų pasiskirstytų tolygiai (susitrauktų tol, kol konteinerio plotis bus lygus vienam stulpeliui).
Yra du būdai, kaip "Bootstrap 3" sistemoje išcentruoti stulpelį <div>
:
Pirmuoju būdu naudojamos pačios "Bootstrap's" poslinkių klasės, todėl nereikia keisti žymėjimo ir papildomų CSS. Svarbiausia nustatyti poslinkį, lygų pusei likusio eilutės dydžio. Taigi, pavyzdžiui, 2 dydžio stulpelis būtų centruojamas pridedant 5 poslinkį, t. y. (12-2)/2
.
Žymėjime tai atrodytų taip:
<div class="row">
<div class="col-md-2 col-md-offset-5"></div>
</div>
Šis metodas turi akivaizdų trūkumą. Jis veikia tik lyginių stulpelių dydžių atveju, todėl palaikomi tik .col-X-2
, .col-X-4
, col-X-6
, col-X-8
ir col-X-10
.
margin:auto
)Galite centruoti bet kokio dydžio stulpelius naudodami patikrintą margin: 0 auto;
metodą. Tereikia pasirūpinti "Bootstrap" tinklelio sistemos pridėtu plaukiojimu. Rekomenduoju apibrėžti pasirinktinę CSS klasę, pvz:
.col-centered{
float: none;
margin: 0 auto;
}
Dabar ją galėsite pridėti prie bet kokio dydžio stulpelio bet kokio dydžio ekrane ir ji sklandžiai veiks su "Bootstrap's" reaguojančiu išdėstymu:
<div class="row">
<div class="col-lg-1 col-centered"></div>
</div>
Pastaba: Naudodami abu metodus, galite praleisti .row
elementą ir stulpelį centruoti .container
viduje, tačiau dėl konteinerio klasės užpildymo pastebėsite minimalų faktinio stulpelio dydžio skirtumą.
Atnaujinimas:
Nuo v3.0.1 "Bootstrap" turi integruotą klasę center-block
, kuri naudoja margin: 0 auto
, bet neturi float:none
, todėl galite ją įtraukti į savo CSS, kad ji veiktų su tinklelio sistema.
Bootstrap 3 dabar turi integruotą klasę .center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
Jei vis dar naudojate 2.X, tiesiog pridėkite tai prie savo CSS.
Tai veikia. Tikriausiai tai yra sudėtingas būdas, bet jis veikia gerai. Jis buvo išbandytas jautriai (Y).
.centered {
background-color: teal;
text-align: center;
}