div 내의 수직 수평 중앙 정렬 > 퍼블리셔팁

버그신고

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

div 내의 수직 수평 중앙 정렬 정보

CSS div 내의 수직 수평 중앙 정렬

본문

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 : 중앙

추천
7

댓글 8개

전체 1,218
퍼블리셔팁 내용 검색

회원로그인

진행중 포인트경매

  1. 참여24 회 시작21.09.24 10:16 종료21.09.27 10:16
(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT