Block 태그와 Inline 태그의 가운데 정렬 방법이 다릅니다. Block과 Inline의 구분은 아래 링크를 참조해주세요!
https://nack1400.tistory.com/17?category=1242740
[HTML] #9 Block 태그, Inline 태그 비교 정리(블록vs인라인 태그 정리)
이번에 정리를 해볼 것은 block형 태그와 Inline형 태그입니다. 태그를 사용할 때 이 점을 유의해서 사용하면 훨씬 수월하게 페이지를 구성할 수 있다고 하더군요. 한번 정리해보고 공부해보겠습니
nack1400.tistory.com
박스 = Block 태그
텍스트 = 일반 글자, Inline 태그
1. 박스의 가운데 정렬 (div, Block 태그)
1) 수평 가운데 정렬 방법
- margin: auto;
- 박스는 기본적으로 왼쪽 정렬에 남은 오른쪽 공간이 margin이 추가된다
- 그래서 margin: auto;로 왼쪽, 오른쪽 margin은 똑같이 만들어준다는 개념
2) 수직, 수평 가운데 정렬 방법
- position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);
- 위의 네 개를 같이 사용한다
- 박스의 위치를 왼쪽 위 꼭짓점을 기준으로 위에서 50%, 왼쪽에서 50%로 맞춘다
- 그 뒤 박스 크기의 50%만큼 다시 왼쪽 위로 transform 해준다는 개념
만약 여기서 수직만 하고 싶다면 left 속성과 transform에서 수평 요소를 변경하지 않으면 된다
예) left: 0%; transform: translate(0%, -50%);
2. 텍스트의 가운데 정렬 (텍스트, Inline 태그)
1) 수평 가운데 정렬 방법
- text-align: center;
- Inline 태그와 일반 텍스트 둘 다 위의 속성을 추가해주면 가운데 정렬이 된다
2) 수직 가운데 정렬 방법
- line-height: 부모 박스 높이;
- 텍스트의 박스의 크기를 부모 박스와 똑같이 맞추어주어 자동으로 가운데로 오게 한다는 개념
3. 예시
See the Pen Untitled by KwonRakhyun (@nack1400) on CodePen.