프리랜서 웹디자이너 RELATION RELATION.CO.KR

RELATION 로고

홈페이지 소스

[CSS] CSS2로 수직 가운데 정렬

2017.11.08
방법 1. div태그의 display속성을 table로 설정하는 방법
이렇게 함으로써 div태그에 table속성에 있는 vertical-align 속성을 설정할 수 있다. 하지만...아쉽게도 ie6에서는 display:table속성이 먹지 않는다는것을 명심해야한다.
<style type="text/css">
#wrapper {display:table;}
#cell {display:table-cell; vertical-align:middle;}
</style>

<div id="wrapper">
<div id="cell">
<div class="content">Content goes here</div>
</div>
</div>



방법 2. absolute속성을 이용
이번에는 absolute속성을 이용하여 top속성에 50%를 주어 콘텐츠를 내리고 margin을 이용하여 콘텐츠 높이의 절반을 margin-top:-120px;이와같이 마이너스값을 이용한다. 그럼으로써 높이를 고정시킬 수 있다.
<style type="text/css">
#content {position:absolute; top:50%; height:240px; margin-top:-120px;}
</style>

<div id="content">Content Here</div>



방법 3. line-height속성을 이용
이 방법은 박스 안의 텍스트가 한 줄일 경우에만 유효하다. 박스의 높이값과 line-height를 동일하게 부여한다.
<style type="text/css">
#content {height:100px; line-height:100px;}
</style>

<div id="content">Content Here</div>





방법 4. 이미지를 가운데 정렬 시키는 법
이번 예제는 ie에서도 적용되는 예제이다.
<style type="text/css">
.vCenter {
display:table; width:400px; height:400px; border:1px solid red;
}
.vCenter span {
display:table-cell; text-align:center; vertical-align:middle;
}
</style>

<!--[if lt IE 8]>
<style type="text/css">
.vCenter { position:relative; }
.vCenter span {
display:inline-block; position:absolute; top:50%; left:50%;
}
.vCenter span a {
position:relative; top:-50%; left:-50%;
}
</style>
<![endif]-->

<div class="vCenter">
<span>
<a href="#">
<img src="thumbnails.jpeg" alt="이미지" />
</a>
</span>
</div>

이 포스트 공유하기

글수정  글삭제 전체목록
<
 
1
           
검색    글쓰기
번호 제 목 작성자 작성일 조회수
중요 [소스] 기존 a 태그 href를 이용하여 부드럽게 스크롤 이동하기 작성글은 비공개로 설정 되었습니다. 꿘쓰 2017.02.10 73
중요 [기타] 구글맵 플랫폼 꿘쓰 2019.01.22 3516
중요 [소스] 구글맵 반경 검색 작성글은 비공개로 설정 되었습니다. 꿘쓰 2018.01.08 17
중요 [소스] 구글맵 이동 경로 표시 꿘쓰 2018.01.18 3523
중요 [소스] 구글맵 좌표값 구하기 꿘쓰 2019.01.08 2172
중요 [소스] 구글맵 웹사이트 띄우기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2013.01.02 20768
227 [소스] 마우스 롤오버 효과 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.30 2
226 [기타] 퍼센트 계산, 백분율 계산 방식 꿘쓰 2020.06.22 59
225 [소스] Window.scroll() 꿘쓰 2020.06.22 63
224 [소스] scrollLeft(), scrollTop() 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.15 0
223 [소스] 숫자 카운트 1 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.03 1
222 [CSS] 그라데이션 자동 생성 사이트 꿘쓰 2020.05.29 95
221 [CSS] flex-wrap:wrap 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.05.29 0
220 [SCRIPT] 자바스크립트 number_format 숫자 콤마 제이쿼리 꿘쓰 2019.12.03 172
219 [소스] 구글 로그인 API 자바스크립트 꿘쓰 2019.08.16 325
218 [JQUERY] 체크박스 체크 유무 jquery 꿘쓰 2019.07.23 352
217 [CSS] css webkit, moz, ms, o 의미 꿘쓰 2019.04.16 519
216 [HTML] HTML5 Canvers 태그 꿘쓰 2019.03.22 617
215 [기타] 카카오 상담톡 비즈니스 메신져 꿘쓰 2019.03.21 589
214 [기타] a태그 onclick 클릭 이벤트 차이점 꿘쓰 2019.03.13 582
213 [소스] 카카오 로그인 작성글은 비공개로 설정 되었습니다. 꿘쓰 2019.03.08 1
212 [소스] 별점주기 꿘쓰 2019.02.21 688
211 [소스] Select option를 버튼(div) 방식으로 변경하기 꿘쓰 2019.02.21 673
210 [소스] 코멘트 게시판 디자인 이미지 테두리 둥글게 하기 (border-radius) 꿘쓰 2019.02.13 877
209 [소스] 아이폰 갤러리 이미지 저장 방지 꿘쓰 2019.01.09 627
208 [CSS] 줄바꿈, URL 줄바꿈을 위한 CSS 꿘쓰 2019.01.04 669