깜놀하는 해므찌로

Tailwind 중앙 정렬 (콘텐츠, 글씨 등) 본문

IT

Tailwind 중앙 정렬 (콘텐츠, 글씨 등)

agnusdei1207 2023. 7. 2. 18:59
반응형
SMALL
<div class="flex flex-col items-center w-5/6 mx-auto">
 content
</div>

1. 기본적으로 justify-center, items-center 도 있지만 중요한 건 mx-auto 와 w-5/6 입니다.

2. 자동으로 x축 마진을 잡아주고 사이즈 자체를 1이 아닌 5/6 으로 줄였으므로 자동으로 가운데로 배치가 되도록 합니다.

 

반응형
LIST

'IT' 카테고리의 다른 글

Tailwind CSS 이미지 rounded 예시  (0) 2023.07.03
TypeScript Generic  (0) 2023.07.03
Class 이름 자동 정렬 / Headwind  (0) 2023.07.01
Tailwind Gradation 그라데이션 효과 활용 예시  (0) 2023.07.01
CURL 명령어 : Client URL 줄임말  (0) 2023.06.30
'IT' Related Articles more