[CSS] 정렬 스타일

배치 - 가로 방향 가운데 정렬

부모선택자 { text-align : center; }
자식선택자 { display : inline-block ; }

/* 또는 */

선택자 { 
    dispaly : block ;
    margin : 0px auto ; 
}

 

배치 - 플렉스 박스 활용 정렬

선택자 {
    display : flex ;
    
    /* 가로 방향 정렬 */
    justify-content : 속성값 ;
    
    /* 세로 방향 정렬 */
    align-items : 속성값 ;
}

 

  - 속성 값

    · flex-start

        : 주축의 시작점을 기준으로 배치 (왼쪽)

    · flex-end

        : 주축의 끝점을 기준으로 배치 (오른쪽)

    · center

        : 주축의 중앙을 기준으로 배치 (가운데)

    · space-between

        : 첫 번째 항목과 마지막 항목은 시작점과 끝점에 배치한 후,

          나머지 항목들은 같은 간격으로 배치함

    · space-around

        : 모든 항목을 같은 간격으로 배치함

 

 

---

텍스트 정렬

선택자 { text-align : start | end | left | right | center | justify | match-parent ; }

 

  - start : 현재 텍스트 줄의 시작 위치에 맞춰 문단 정렬

  - end : 현재 텍스트 줄의 끝 위치에 맞춰 문단 정렬

  - left (기본값) : 왼쪽에 맞춰 문단 정렬

  - right : 오른쪽에 맞춰 문단 정렬

  - center : 가운데에 맞춰 문단 정렬

  - justify : 양쪽에 맞춰 문단 정렬

  - match-parent : 부모 요소에 맞춰 문단 정렬