[CSS] 정렬 방법

Code/Web 2019. 1. 28. 20:46




- 주의! 정렬(특히 중앙정렬은) width, height, margin 속성에 영향을 받는다


//==========
* flex  
    - 플렉서블 박스(flexible box) 레이아웃
https://developer.mozilla.org/en-US/docs/Web/CSS/flex
https://www.w3schools.com/css/css3_flexbox.asp
https://www.w3schools.com/cssref/css3_pr_flex.asp


    - 예제) 중앙 정렬  <=== 권장 추천!!!
.flex1 {
display: flex;            /* flex형식으로 지정 */
flex-direction: row;    /* 배열 방식: row=수평, columm=수직 */
justify-content: center;/* 가로 정렬: center=중간, flex-start=좌, flex-end=우 */
align-items: center;    /* 세로 정렬: center=중간, flex-start=좌, flex-end=우 */
}


//==================
* text-align
https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
    - 블록 안의 내용에 대한 좌우 정렬
text-align: center;
text-align: left;
text-align: right;
text-align: justify; /* 양쪽 정렬 */


//============================
* vertical-align
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
https://www.w3schools.com/cssref/pr_pos_vertical-align.asp
    - 사용 주의, 한줄안에서 세로 정렬, 블록에는 적용안됨
    inline , table-cell 에만 적용됨

vertical-align: middle;
vertical-align: top;
vertical-align: bottom;



//==============
// 참고
- Layer 화면 중앙정렬 방법
https://wit.nts-corp.com/2017/02/06/4123




반응형

'Code > Web' 카테고리의 다른 글

[CSS] @ At-rule 정리 (@page )  (0) 2019.01.30
[CSS] position 속성  (0) 2019.01.30
[CSS] float 레이아웃  (0) 2019.01.28
[CSS] display (block, flex, grid)  (0) 2019.01.28
웹 아이콘 사용법 - Google Material, Font Awesome, glyphicons  (0) 2019.01.28
Posted by codens