[css] 가로 가운데 정렬

개발자 콘솔에서 parent margin 영역을 확인해보면, 마진영역이 브라우저 꽉차게 나오는데 이 의미는 auto값으로 설정할 수 있는 마진의 최대값을 의미한다. parent가 블럭요소이기 때문에 한줄을 다 빌렸다. 밑의 영역은 parent가 빌린 영역이 아니다.

 

마진을 auto값을 주면 빌린 영역을 사용 할 수 있다. margin-left: auto로 설정하면, margin 최대값을 사용하기 때문에 컨텐츠가 오른쪽으로 정렬된다. 그래서 양쪽 모두 margin-left, right auto로 주면 가운데로 정렬됨

 

margin-top, bottom auto로 주면 상하까지 가운데로 정렬될거라 예상할 수 있지만 위에 언급했듯이 빌린영역이 없기 때문에 적용될 수 없다.

 

<div class="parents">
  <div class="children">wow</div>
</div>


.parents {
  width: 800px;
  height: 800px;
  background-color: orange;
}

.children {
  width: 200px;
  height: 200px;
  background-color: orangered;
}

 

children 에서도 가운데 정렬하려면 width값과 margin auto값을 넣어줘야 한다.

width 값이 명시가 안되었다면, auto가 기본 값이며, auto의 의미는 상위 부모 크기 기준으로 가득 차기 때문에 가운데 정렬이라는 의미가 무색해진다.

 

.children {
  margin: 0 auto;
  width: 200px;
}

 

 

텍스트 요소를 가운데 정렬

block 요소에게 주되, block요소가 영향을 받지 않고 그 안에 있는 inline 요소에게 영향을 끼친다.

text-align: center;

 

 

https://www.youtube.com/watch?v=m4v3NRHxOJc