display: table-cell을 이용한 컨텐츠의 수직적 중앙정렬 : happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > CSS > 기본 소스 > display: table-cell을 이용한 컨텐츠의 수직적 중앙정렬 상세정보

클라우드태그

javascript

HTML

PHP

2022

Api

CSS

웹메일

jquery

ASP

쇼핑몰

mysql

갤러리

mobile

현재접속자 명

display: table-cell을 이용한 컨텐츠의 수직적 중앙정렬

해피팀

네티즌

소스분류

기본 소스

다운로드 횟수

0 회

간단설명

display: table-cell을 이용한 블럭요소의 컨텐츠 수직적 중앙정렬 방법입니다.

평가하기

수평적 중앙에 컨텐츠 배치는 margin:0 auto; 소스로 간단하게 배치가 가능하지만

수직적 중앙에 컨텐츠 배치는 잘 되지 않습니다.

자바스크립트 없이 아래 css 소스로 해결할 수 있는 방법 입니다.

.container {
    width:
    display: table-cell;
    vertical-align: middle;
}

예)

안녕하세요^^

네티즌 의견 이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)

내용

아이디

의견남기기

수평적 중앙위치 소스 너무 유용하게 잘 썼습니다.

2023-03-08 10:38:02

최경인

찬성

반대