[CSS] 정렬 속성

 

 

 

텍스트 정렬 (Text Alignment)

텍스트나 인라인 요소의 수평 정렬을 지정한다.

 

text-align 속성

left	왼쪽 정렬 (기본값)
right	오른쪽 정렬
center	중앙 정렬
justify	양쪽 정렬

 

 

수직 정렬 (Vertical Alignment)

인라인 또는 테이블 셀 요소의 수직 정렬을 지정한다.

 

vertical-align 속성

baseline	기준선 정렬 (기본값)
top	상단 정렬
middle	중앙 정렬
bottom	하단 정렬

 

 

 

플렉스박스(Flexbox) 정렬

display: flex : 부모 요소를 플렉스 컨테이너로 만든다.

 

flex 의  justify-content (주 축(main axis) 방향으로의 정렬) 주요 속성

flex-start	시작 부분 정렬 (기본값)
flex-end	끝 부분 정렬
center	중앙 정렬
space-between	아이템 사이에 동일한 간격을 줌
space-around	아이템 주위에 동일한 간격을 줌

 

 

flex 의  align-items (교차 축(cross axis) 방향으로의 정렬) 주요 속성

stretch	아이템을 채움 (기본값)
flex-start	시작 부분 정렬
flex-end	끝 부분 정렬
center	중앙 정렬
baseline	텍스트 기준선 정렬

 

align-self

개별 아이템의 교차 축 방향 정렬을 지정 (기본값은 align-items 값 상속)

 

 

 

그리드 레이아웃(Grid Layout) 정렬

display: grid: 부모 요소를 그리드 컨테이너로 만든다.

 

grid 주요속성

justify-items	그리드 셀 내에서의 수평 정렬	start	시작 부분 정렬
		end	끝 부분 정렬
		center	중앙 정렬
		stretch	아이템을 채움 (기본값)
align-items	그리드 셀 내에서의 수직 정렬	start	시작 부분 정렬
		end	끝 부분 정렬
		center	중앙 정렬
		stretch	아이템을 채움 (기본값)
justify-content	전체 그리드의 수평 정렬
align-content	전체 그리드의 수직 정렬
place-items	align-items와 justify-items를 함께 설정