CSS-də Blok Elementlərinin Mərkəzləşdirilməsi

margin xassəsi təkcə boşluq təyin etmək üçün deyil, həm də blok elementlərini mərkəzləşdirmək üçün istifadə olunur. Bunun üçün sağ və sol boşluqlar auto dəyərinə təyin edilməlidir.

Aşağıdakı nümunədə daxili blok mərkəzdə yerləşəcək:

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

css.parent {
  border: 1px solid red;
}

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

Результат:

Unutmayın ki, bu yolla yalnız blok elementlərini, yalnız üfüqi istiqamətdə və yalnız eni təyin olunmuşsa mərkəzləşdirmək olar.

Əgər bizim fərqli yuxarı və aşağı margin boşluqlarına ehtiyacımız varsa, bunu belə yazmaq olar:

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

Bunu üç dəyərlə də yazmaq olar: birincisi yuxarı boşluğu, üçüncüsü aşağı boşluğu təyin edər, ikinci isə sağ və sol boşluqlar üçün auto dəyərini təyin edər:

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