flexytale project.css로 가운데 정렬을 하는 법 : 링크 정리

css에서 정렬을 하는 방법은 여러 가지가 있다.

 

특히 중앙정렬을 할때 내가 참고하는 여러가지 방법은 이러하다.

1. position, transform 사용 (직접 조정)

2. flex 사용 (div 조정, 버튼 이미지 조정, absolute적용이 힘들때)

3. vertical-align, text-align 사용 (inline-block을 사용하고 싶을때)

4. line-height 사용 (폰트기반 아이콘의 위치를 조정할때)

5. margin: auto 사용 (메인 콘텐츠 컨테이너를 수평중앙에 둘때, block에서)

6. text-align: center (요소가 텍스트, inline, inline계열일때)

7. grid, place-content 사용

아래의 링크로 이동하면 자세한 설명을 확인할 수 있다.

 

[짧은 css팁] 쉬운 중앙정렬

https://brunch.co.kr/@skykamja24/514

[짧은 CSS 팁] 쉬운 중앙 정렬

 

 

그 중에서 내가 가장 자주 쓰는 방법은 2. flex 다.

 

가로 정렬

display: flex;
align-items: center;

세로 정렬

display: flex;
flex-direction: column;
justify-content: center;

 

 

가로 중앙 정렬

display: flex;
justify-content: center;

 

세로 중앙 정렬

 

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

 

[CSS 기초] 엘리먼트 수직, 수평 중앙 정렬하기 (vertical align, flex, text-align, position...)

https://jwss.tistory.com/12

[CSS] flex를 이용한 가운데 정렬

https://velog.io/@jary/flex%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EA%B0%80%EC%9A%B4%EB%8D%B0-%EC%A0%95%EB%A0%AC