Блокли элементларни CSS да выравнивание қилиш

margin хусусияти фақат чўзилишларни белгилаш учунгина эмас, балки блокли элементларни марказга олиш учун ҳам қўлланилади. Бунинг учун ўнг ва чап чўзилишлар auto қийматга белгиланги.

Қуйидаги мисолда ички блок марказда бўлади:

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

Эътиборингизга олингки, шу тарзда фақат блокли элементларни, фақат горизонтал равишда ва фақат уларга эни белгиланган бўлсагина марказга олиш мумкин.

Агар бизга турли хил юкори ва пастки чўзилиш margin керак бўлса, у ҳолда шундай ёзиш мумкин:

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

Учта қиймат орқали ҳам қайта ёзиш мумкин: биринчиси юкори чўзилишни, учинчиси - пасткини белгилайди, иккинчиси эса ўнг ва чап чўзилишлар учун auto қийматини белгилайди:

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

Яшил блоклар ўз отасининг марказида жойлашиши учун саҳифани намунага қараб такрорланг: