[text-align] <p> 가운데 정렬 비교(수직 정렬)

이 글은 <p>의 가운데 정렬을 하기 위한 비교 페이지 입니다.

 

<p>는 block 요소 인데 왜 text-align을 사용하는지 이해 못했던 발견을 이곳에 정리합니다.

 

 

text-align만

 

<p>tag block이다 보니까 default  => width 100%

+ text-align:center

 

text-align + width

<p> tag가 block 이다보니 width를 줬을 때 왼쪽으로 밀림

 

text-align + width + margin

 

이제 완성 됐습니다.

 

text-align + width + margin

 

여기서 text-align이 없으면 <p>안에 item의 정렬이 왼쪽 정렬로 변경됨.