Radhitja e Elementeve Bllok në CSS

Vetia margin përdoret jo vetëm për të caktuar hapësira, por edhe për të përqendruar elementet bllok. Për këtë, hapësira e djathtë dhe e majtë duhet të caktohen në vlerën auto.

Në shembullin më poshtë, blloku i brendshëm do të vendoset në qendër:

<div class="parent">
	<div class="child"></div>
</div>

.parent {
	border: 1px solid red;
}

.child {
	height: 100px;
	width: 200px;
	border: 1px solid green;
	margin: 10px auto;
}

Kini parasysh se në këtë mënyrë mund të përqendrohen vetëm elementet bllok, vetëm horizontalisht dhe vetëm nëse u është caktuar gjerësi.

Nëse kemi nevojë për hapësira të ndryshme sipër dhe poshtë për margin, atëherë mund të shkruajmë kështu:

.child {
	margin: 30px auto 10px auto;
}

Mund të rishkruhet edhe me tre vlera: e para do të caktojë hapësirën e sipërme, e treta - atë të poshtme, ndërsa e dyta do të caktojë vlerën auto për hapësirat e djathtë dhe të majtë:

.child {
	margin: 30px auto 10px;
}

Përsëriteni faqen sipas mostrës, duke u siguruar që blloqet e gjelbër të vendosen në qendër të prindit të tyre: