[ CSS ] text-align : center 와 margin : auto 정리

 

두 CSS 명령어 모두 어떤 요소를 가로로 정렬하기 위해서 사용된다

text-align : center 

 

핵심은 '인라인 레벨이든 블록 레벨이든 자식 요소를 정렬 ' 이다. 

 

1.  자식 요소 중 , 인라인 레벨 요소를 가로로 정렬한다.

2. 자식 요소 중, 블록레벨 요소는 블록라인 안에 있는 인라인 요소를 가로로 정렬한다. ( 자식이 블록요소면, 손자 요소중 인라인 요소를 가로로 정렬한다 )

 

** 이때 주의할 점은 블록 레벨인 자식 요소는 가운데 정렬하지 않는다. 블록 레벨 안에 있는 손자 요소중 인라인 레벨을 갖는 요소만 정렬하는것

 

margin : auto

핵심은 ' 블록 레벨을 갖는 본인 ' 을 정렬 이다.

 

예시코드

// JSX 로 작성

<div
        style={{
          textAlign: "center",
          border: "1px solid black",
          width: "500px",
          height: "500px",
        }}
      >
        <h1>로그인</h1>
        <input type="text" />

        <div
          style={{
            border: "1px solid black",
            width: "200px",
            height: "50px",
          }}
        >
          <span>테스트글씨1</span>
        </div>
        <span>테스트글씨2</span>
        <p
          style={{
            border: "1px solid black",
            width: "300px",
            margin: "auto",
          }}
        >
          테스트글씨3
        </p>
      </div>
    </div>

 

 

블록레벨을 갖는 테스트 글씨1 은 text-align 이 되지 않지만, 그 안에 있는 테스트 글씨1 은 가운데 정렬을 적용 받는다

인라인 레벨인 <input> 이나 <h1> 는 가운데 정렬을 적용 받는다  ex. 테스트글씨2

 

블록레벨을 갖는 테스트글씨3 의 테두리는 원래 테스트글씨1 의 테두리처럼 가운데 정렬이 되지 않지만, margin : auto 속성으로 인해 가운데 정렬이 된다. 그 안에 있는 테스트글씨3은 text-align 의 영향으로 가운데 정렬이 된다