CSS 중앙정렬 방법
01. block 요소나 칸 상자에 있는 인라인 콘텐츠를 중앙정렬하기 → text-align: center;
text-align을 block 요소(혹은 칸 상자)에 적용해야 하고, 적용 결과 inline contents를 정렬시켜준다.
lineheight를 콘텐츠box 높이만큼 주면 콘텐츠를 수직정렬도 할 수 있다.
02. 블록 요소 중앙정렬하기 → margin-left: Auto, margin-right: Auto
위와 똑같은 html에 margin-left: auto; 와 margin-right: auto;를 적용해도 중앙정렬이 되지 않는다. 이런 경우 width값을 주면 블록이 중앙정렬 된다.
mdn 설명에 따르면, 상하 마진은 span이나 code와 같은 대체되지 않는 inline 요소에 효과가 없다.
대체 요소(replaced element)란?
CSS의 대체 요소란, 자신의 표현 결과가 CSS의 범위를 벗어나는 요소로서, CSS 서식 모델과는 분리된 외부 객체인 요소이다.
즉, CSS는 대체 요소의 위치에 영향을 줄 수 있지만 콘텐츠에는 미치지 못한다. iframe 등 일부 대체 요소는 자신만의 스타일 시트를 가질 수도 있지만, 부모 문서의 스타일을 상속받지는 않는다.
CSS가 대체 요소에 영향을 줄 수 있는 다른 유일한 방법은, 일련의 속성을 통해 요소 박스에서 콘텐츠의 위치를 제어하는 것이다.
대표적인 대체 요소에는 iframe, video, embed, img가 있다.
03. mdn에서 제안하는 수평정렬 방식 → display: flex, justify-content: center
이 방식은 콘텐츠를 수평정렬해준다. 블록은 수평정렬해주지 않는다.
display는 블록과 인라인 요소 중 어느 쪽으로 처리할 지와 flow, grid, flex처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정한다.
mdn은 display: flex; justify-content: center;가 지원되지 않는 경우 margin:0 auto;를 사용하도록 하고 있지만, 02 방식과 마찬가지로 width 값을 지정해주어야 블록 요소가 중앙정렬된다.
수직정렬도 하려면 이렇게 하면 된다(2022-04-13 수정)
display: flex;
justify-content: center;
align-items: center;
Author And Source
이 문제에 관하여(CSS 중앙정렬 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sjmh0507/CSS-중앙정렬-정리저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)