테스트 사이트 - 개발 중인 베타 버전입니다

div 내의 수직 수평 중앙 정렬

· 4년 전 · 4889 · 19

div 로 무엇을 만들 때 수직 수평 중앙 정렬이 안 되어서 늘 테이블을 그리워 했던 기억들을 누구나 가지고 있었을 것입니다.

display:flex 를 사용하여 쉽게 정렬할 수 있습니다. div 안의 내용이 그 무엇이라도 상관이 없습니다.

 

<style>
.my { display:flex; justify-content:center; align-items:center;  }
</style>
<div class=my style=width:600px;height:600px;background-color:yellow>
그누보드
</div>

 

justify-content : 테이블에서 align 처럼
flex-start : 좌측
flex-end : 우측
center : 중앙

 

align-items : 테이블에서 valign 처럼
flex-start : 상단
flex-end : 하단
center : 중앙

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 19개

감사합니다..!
감사합니다.
4년 전
감사히 써보겠습니다.
4년 전
line-height는 이제 안녕해도 되겠네요. 좋은 정보 감사합니다.
4년 전
감사합니다
3년 전
감사합니다
좋은 정보 감사합니다!!
3년 전
감사합니다
감사합니다.

게시글 목록

번호 제목
3530
3529
3497
3472
3471
3451
3442
3441
3437
3436
3425
3421
3420
3405
3402
3399
3397
3394
3393
3392
3391
3390
3389
3388
3387
3386
3385
3384
3383
3382