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 : 중앙
추천
15
15
댓글 19개
감사합니다.
@써맨 감사합니다
와... 감사합니다.
저두 최근에 테이블을 이용해 만들었는데 ....
감사히 잘 사용하겠습니다~~^^;
저두 최근에 테이블을 이용해 만들었는데 ....
감사히 잘 사용하겠습니다~~^^;
@정민황 감사합니다
감사합니다.
저도 잘 해보겠습니다
감사.
정말 필요했었는데 너무 감사합니다.
감사합니다.
좋은팁입니다
감사합니다..!
감사합니다.
감사히 써보겠습니다.
line-height는 이제 안녕해도 되겠네요. 좋은 정보 감사합니다.
감사합니다
감사합니다
좋은 정보 감사합니다!!
감사합니다
감사합니다.