ბლოკური ელემენტების გასწორება 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;
}

გაიმეორეთ გვერდი ნიმუშის მიხედვით, ისე რომ მწვანე ბლოკები განთავსდეს თავიანთი მშობლის ცენტრში: