🗒 본 게시글은 flexible box 사용없이 center로 정렬하는 방법입니다
📌 1. 가로 가운데 정렬
1-1. 텍스트 가운데 정렬: "text-align: center"
: block 또는 inline-block 속성을 가졌을 때만 사용할 수 있음
: center가 될 기준(width) 값이 없다면 지정해주기(width: 100%)
- inline 속성에는 text-align이 적용되지 않음
- float로 자식을 배열한 경우도 적용되지 않음
| 해결법 |
최상위 부모 선택자에 "text-align: center" 속성을 적용하고,
상위 부모에 "display: inline-block" 속성을 적용(* 따라서, 부모가 2개 있어야 함)
/* 예 */ ul 의 부모요소 {text-align: center;} ul {display: inline-block;} li {float: left;}
1-2. 요소의 가운데 정렬: "margin: 0 auto"
: block 속성을 가졌을 때만 적용됨. width 값을 지정해주어야 한다.
(but, width=100%는 적용되지 않음!)
부모요소{width: 900px; margin: 0 auto;}📌 2. 세로 가운데 정렬
2-1. "vertical-align: middle"
| 방법 |
부모에 "display: table" (height 설정 필수!)을 주고,
정렬을 하고자 하는 요소에 "display: table-cell; vertical-align: middle;"을 적용한다
vertical-align은 옆 기준(img, input, icon font 등)을 중심으로 text를 정렬하는 기능이다
옆 기준에 해당 속성을 적용하면 된다.text3 img{ vertical-align: middle; } .material-icons{ vertical-align: top; } /* 구글 아이콘 */
2-2. "line-height: "
| 방법 |
텍스트가 한 줄일 때나 이미지가 하나 들어갈 때 사용하면 좋음
heigth를 설정하고, height와 같은 값을 line-height로 설정해준다
요소{height: 100px; line-height: 100px;}📌 가로|세로 transform 맞추기
: transform으로 가로|세로를 정가운데 정렬하는 방법도 있다!
| 방법 |
가로 세로 동시에 정가운데 정렬을 하고자 할 땐 아래 코드를 적용하면되고, 둘 중 하나만 정렬하고 싶다면 " transform: translate(-50%); "만 적으면 된다!
요소{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}📌 결론: flexible box,,,
: 완벽하게 수직/수평을 정가운데로 정렬할 수 있는 방법은? flexible box..!
display: flex;
justify-content: center;
align-items: center;📚 Reference
: 국비지원 수업
