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개
4년 전
감사합니다.
4년 전
@써맨 감사합니다
4년 전
와... 감사합니다.
저두 최근에 테이블을 이용해 만들었는데 ....
감사히 잘 사용하겠습니다~~^^;
저두 최근에 테이블을 이용해 만들었는데 ....
감사히 잘 사용하겠습니다~~^^;
4년 전
@정민황 감사합니다
4년 전
감사합니다.
4년 전
저도 잘 해보겠습니다
4년 전
감사.
4년 전
정말 필요했었는데 너무 감사합니다.
4년 전
감사합니다.
4년 전
좋은팁입니다
ditto88
4년 전
감사합니다..!
Bsori
4년 전
감사합니다.
아이스웨덴™
4년 전
감사히 써보겠습니다.
4년 전
line-height는 이제 안녕해도 되겠네요. 좋은 정보 감사합니다.
4년 전
감사합니다
3년 전
감사합니다
dbehd1001
3년 전
좋은 정보 감사합니다!!
디자이너민
3년 전
감사합니다
yangah
2년 전
감사합니다.
게시글 목록
| 번호 | 제목 |
|---|---|
| 3381 | |
| 3380 | |
| 3379 | |
| 3378 | |
| 3377 | |
| 3376 | |
| 3375 | |
| 3374 | |
| 3373 | |
| 3372 | |
| 3371 | |
| 3370 | |
| 3369 | |
| 3368 | |
| 3367 | |
| 3366 |
기타
Vuejs 템플릿 약어
|
| 3365 | |
| 3364 |
기타
vuejs 템플릿 문법
|
| 3363 | |
| 3362 | |
| 3361 |
기타
Vue 속성과 메소드
|
| 3360 | |
| 3359 | |
| 3358 | |
| 3357 | |
| 3356 | |
| 3355 |
기타
vue.js 시작하기
|
| 3354 |
기타
Vue.js란
|
| 3351 | |
| 3350 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기