Kā es varu centrēt vienas kolonnas lieluma dalījumu konteinerā (12 kolonnas) 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>
Es gribu, lai div
ar klasi .centered
tiktu centrēts konteinerā. Es varu izmantot rindu, ja ir vairāki div
, bet pagaidām es gribu tikai div
ar vienas kolonnas izmēru, kas centrēts konteinerā (12 kolonnas).
Es arī neesmu pārliecināts, ka iepriekš minētā pieeja ir pietiekami laba, jo nav paredzēts div
nobīdīt uz pusi. Man nav vajadzīgas brīvas vietas ārpus div
, un div
saturs proporcionāli saruks. Es gribu, lai tukšā vieta ārpus divdaļas būtu vienmērīgi sadalīta (jāsamazina, līdz konteinera platums ir vienāds ar vienas kolonnas platumu).
Pastāv divas pieejas kolonnas <div>
centrēšanai lietotnē Bootstrap 3:
Pirmajā pieejā tiek izmantotas Bootstrap's pašas nobīdes klases, tāpēc nav nepieciešamas nekādas izmaiņas marķējumā un papildu CSS. Galvenais ir nosacīt nobīdi, kas vienāda ar pusi no atlikušā rindas izmēra. Tā, piemēram, 2 lieluma kolonnu centrēs, pievienojot nobīdi 5, tas ir, (12-2)/2
.
Marķējumā tas izskatītos šādi:
<div class="row">
<div class="col-md-2 col-md-offset-5"></div>
</div>
Šai metodei ir acīmredzams trūkums. Tā darbojas tikai pāra lielumiem, tāpēc tiek atbalstīti tikai .col-X-2
, .col-X-4
, col-X-6
, col-X-8
un col-X-10
.
margin:auto
).Jūs varat centrēt jebkuru kolonnas izmēru, izmantojot pārbaudīto margin: 0 auto;
metodi. Jums tikai jārūpējas par Bootstrap tīkla sistēmas pievienoto peldošo daļu. Es iesaku definēt pielāgotu CSS klasi, piemēram, šādu:
.col-centered{
float: none;
margin: 0 auto;
}
Tagad jūs varat to pievienot jebkura izmēra kolonnai pie jebkura ekrāna izmēra, un tā darbosies bez problēmām ar Bootstrap'responsīvo izkārtojumu:
<div class="row">
<div class="col-lg-1 col-centered"></div>
</div>
Piezīme: Izmantojot abus paņēmienus, jūs varētu izlaist .row
elementu un izcentrēt kolonnu .container
iekšpusē, bet jūs pamanītu minimālu atšķirību faktiskajā kolonnas izmērā, jo konteineru klasē ir izvietoti spilventiņi.
Atjauninājums:
Kopš v3.0.1 Bootstrap ir iebūvēta klase center-block
, kas izmanto margin: 0 auto
, bet nav float:none
, jūs varat to pievienot savam CSS, lai tas darbotos ar režģa sistēmu.
Bootstrap 3 tagad ir iebūvēta klase šim .center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
Ja joprojām izmantojat 2.X versiju, vienkārši pievienojiet to savam CSS.
Tas darbojas. Iespējams, tas ir banāls veids, bet tas darbojas labi. Tas tika pārbaudīts, lai reaģētu (Y).
.centered {
background-color: teal;
text-align: center;
}