HTML&CSS (2) 썸네일형 리스트형 [HTML/CSS] 항목을 브라우저를 기준으로 수평 가운데 정렬 하는 방법 text-align: center; 활용 margin-left: auto; margin-right: auto; 활용 Code (text-align: center;) inline 속성의 텍스트 Code (margin-left: auto; margin-right: auto;) Explanation 핵심 display text-align margin 사전에 알아야 할 특징 text-align과 margin이 어떻게 적용되는지 살펴보면 중앙에 요소를 정렬하고자 할 때 둘 중 어떤 방법을 활용해야 할지 명확히 알 수 있다. text-align text-align 속성은 줄 박스(contents box) 내 요소를 박스 내에서 정렬한다. inline의 경우 줄 박스가 최소화되는 성질이 있으므로 한 줄 텍스트만 입력.. [HTML/CSS] 항목을 수직으로 가운데 정렬 하는 방법 vertical-align: middle 활용 Code Main Contents 결과 Explanation 핵심 baseline vertical-align 사전에 알아야 할 특징 baseline(문자 바로 아래 라인 ex. 밑줄 적용 위치)은 특성상 항목의 높이를 최소화하는 성질이 있기 때문에 box class 내 요소 중 "가장 큰 요소를 기준으로" box 상단에 붙게 된다. 따라서, 하나의 요소만 입력하면 해당 요소가 상단에 붙게 되고 크기가 다른 요소들이 여러 개 있다면 가장 큰 요소만 상단에 붙고 큰 요소의 baseline에 따라 다른 요소들이 정렬된다. vertical-align: middle을 가장 큰 요소에 적용하면 큰 요소의 중앙을 부모 요소의 중앙 지점으로 정렬한다. 이때 항목의 높이를 .. 이전 1 다음
