[TIL] 2021-07-31

 

 

1. flexbox가 아닌 text-align 속성을 이용해서 요소를 정렬할 수 있다.

현대 브라우저에서 어떤 요소를 중앙에 배치하려면 display: flex; justify-content (en-US): center;를 사용하면 됩니다.
하지만 플렉스 박스 레이아웃을 지원하지 않는 Internet Explorer 8-9 등 오래된 브라우저를 지원해야 하면 margin: 0 auto;를 대신 사용하세요. (출처: MDN)

body {
  text-align: center
}

 

 

 

2. margin: auto; 브라우저가 적절한 여백 크기를 선택. 예를 들어 요소를 중앙 정렬하고 싶을 때 사용할 수 있다. (엘리코딩 실습5에서 사용)

    +) margin 값으로 %(percentage)도 사용가능.

 

 

 

3. flex와 다르게 display: block은 부모 요소가 아닌 해당 요소에 직접 작성한다.