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

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

댓글 작성

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

로그인하기

댓글 19개

@써맨 감사합니다
와... 감사합니다.
저두 최근에 테이블을 이용해 만들었는데 ....
감사히 잘 사용하겠습니다~~^^;
@정민황 감사합니다
저도 잘 해보겠습니다
정말 필요했었는데 너무 감사합니다.
좋은팁입니다
감사히 써보겠습니다.
line-height는 이제 안녕해도 되겠네요. 좋은 정보 감사합니다.
좋은 정보 감사합니다!!
감사합니다

게시판 목록

퍼블리셔팁

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