există vreo modalitate de a centrul de elemente html vertical sau orizontal în principal părinții?
**** Update: în timp ce acest răspuns a fost probabil corect, la începutul anului 2013, acesta nu ar trebui să fie utilizate. Soluția corectă folosește compensează.
Ca și pentru alți utilizatori sugestie există, de asemenea, nativ bootstrap clase disponibile, cum ar fi:
class="text-center"
class="pagination-centered"
datorită @Henning și @trejder
Setați un element de
display: block
si centru prin "marjă". Disponibil ca un mixin și de clasă.
<div class="center-block">...</div>
Pentru viitorii vizitatori la această întrebare:
Dacă sunteți încercarea de a centru o imagine într-un div, dar imaginea a câștigat't center, acest lucru ar putea descrie problema ta:
[jsFiddle DEMO de problema](
)<div class="col-sm-4 text-center">
<img class="img-responsive text-center" src="myPic.jpg" />
</div>
Anii img-responsive clasa adaugă un
display:blockinstrucțiuni pentru a eticheta de imagine, care se oprește
text-align:center(
text-center clasa) de lucru.
SOLUȚIE:
<div class="col-sm-4">
<img class="img-responsive center-block" src="myPic.jpg" />
</div>
[jsFiddle de soluție](1/)
Adăugarea centru-blocclasa suprascrie
display:blockinstrucțiuni pune în prin utilizarea
img-responsive clasa.
Fără `img-responsive clasa, imaginea ar center, doar prin adăugarea de text-center clasa
De asemenea, trebuie să știți elementele de bază ale flexbox și cum să-l folosească, deoarece Bootstrap4 acum folosește nativ.
Aici este un excelent, rapid-paced [tutorial video de Brad Schiff](
Aici este o mare foaie de ieftin
Actualizat 2018
În Bootstrap 4, la centrare metodele s-au schimbat..
Orizontală centrală în BS4
text-center
este încă folosit pentru display:inline
elementemx-auto
înlocuiește centru-blocde la centru
display:flex copiioffset-*
sau `mx-auto poate fi utilizat de la centrul de coloane gridmx-auto (auto x-axa marjele) va center
display:block " sau " display:flexelemente care au o *definite lățime*, (
%,
vw,
px`, etc..). Flexbox este utilizat în mod implicit de pe grila de coloane, astfel încât există, de asemenea, diverse flexbox de centrare metode.
Demo Bootstrap 4 Orizontală Centrarea
Pentru centrarea verticala în BS4 vezi https://stackoverflow.com/a/41464397/171456
eu folosesc acest
<style>
html, body {
height: 100%;
margin: 0;
padding: 0 0;
}
.container-fluid {
height: 100%;
display: table;
width: 100%;
padding-right: 0;
padding-left: 0;
}
.row-fluid {
height: 100%;
display: table-cell;
vertical-align: middle;
width: 100%;
}
.centering {
float: none;
margin: 0 auto;
}
</style>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="offset3 span6 centering">
content here
</div>
</div>
</div>
</body>
Îmi place această soluție la o întrebare similară. https://stackoverflow.com/a/25036303/2364401 Utilizarea șireturi text-center clasa pe masă reală de date
și capul de tabel
<td class="text-center">date mobile</td>
și
<th class="text-center">Antet date mobile</lea>
Cu bootstrap 4 puteți folosi flex
<div class="d-flex justify-content-center align-items-center">
<button type="submit" class="btn btn-primary">Create</button>
</div>
sursa: bootstrap 4.1
Am descoperit în Bootstrap 4 puteți face acest lucru:
centrul orizontală este într-adevăr `text-center clasa
centru vertical cu toate acestea, folosind bootstrap clase este adăugarea de mb-auto mt-auto
, astfel încât marja de-sus și marginea de jos sunt setate la auto.
pentru bootstrap4 centru vertical de câteva elemente
d-flex pentru flex reguli
flex-coloană pentru direcție verticală pe elemente
justify-conținut-center pentru centrare
style='height: 300px;' trebuie să aibă pentru set de puncte în cazul în care centrul se calc sau de a folosi h-100 clasa
<div class="d-flex flex-column justify-content-center bg-secondary" style="
height: 300px;
">
<div class="p-2 bg-primary">Flex item</div>
<div class="p-2 bg-primary">Flex item</div>
<div class="p-2 bg-primary">Flex item</div>
</div>
bootstrap 4 + Flex rezolva această
puteți utiliza
<div class="d-flex justify-content-center align-items-center">
<button type="submit" class="btn btn-primary">Create</button>
</div>
acesta ar trebui să center centent orizontala si atat