웹마스터 팁
div 세로 중앙 정렬팁
2014.09.01 17:03
line-height 속성을 이용해서 높이를 알 수 없는 이미지를 세로 중앙 정렬 하는 것이 가능하다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>vertical align with line-height</title>
<style type="text/css">
div.thumb {
background: #eee;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
div.thumb:after {
content: " ";
margin-left: -0.6em;
white-space: pre;
}
div.thumb img {
vertical-align: middle;
}
</style>
</head>
<body>
<div class="thumb">
<img src="http://hyeonseok.com/hyeonseok-.png" alt="hyeonseok.com">
</div>
</body>
</html>
line-height 값을 박스의 높이와 같은 값을 지정하고 안의 이미지를 vertical-align: middle을 사용해서 정렬한다. content 속성을 이용해서 공백을 넣었기 때문에 좌우 정렬은 약간의 오차가 발생할 수 있다.
댓글 0
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| 모달 윈도우 | pixfine | 2014.09.15 |
| 홈페이지 접속시 XE를 바로 실행하기 [7] | ezi | 2011.08.20 |
| 외국어 스팸 방어 [2] | DoorWeb | 2014.07.01 |
| 포인트선물 애드온 차감시키는 방법 | 410contents | 2014.09.12 |
| 카페24 웹호스팅에서 서브 도메인으로 접속 방법 [5] | 데이스타 | 2010.03.28 |
| 게시판 목록에서 새창 띄워서 다른 형태 나오게 하기 [3] | foret | 2014.02.23 |
| 회원정보보기시 공개 안 한 정보에 대해서도 최고관리자는 볼 수 있도록 변경 | sejin7940 | 2014.09.10 |
| 모바일뷰 사용하는 경우, 사이트맵에서 메뉴 생성시, 모바일 뷰 가 자동으로 체크되도록 | sejin7940 | 2014.09.10 |
| 로그인 불가 - APM 관리자일 때 (일반적인 경우 아님) [3] | Sx3 | 2007.08.26 |
| XE코어 업데이트(판올림) 정확한 방법 [12] | 카이닉스 | 2012.07.30 |
| [팁]포럼 모듈 인용글 박스 문제 해결 - 1.7.3 기준 [5] | socialskyo | 2013.03.27 |
| 고도몰과 xe 회원 연동하는 키 포인트 | 410contents | 2014.09.03 |
| 애드온 개발중에 이상한 버그가 생길경우 [2] | 銀童 | 2014.08.26 |
| div 세로 중앙 정렬팁 | Ansi™ | 2014.09.01 |
| 카카오톡으로 보내기(깔끔한 뷰) [4] | seyriz | 2014.08.11 |
socialXE 에서 로그인시 소셜로그인과 XE 로그인 동시 구현하기
 | 큐우우 | 2014.08.31 |
| XE에 페이스북 소셜 댓글 연동하는 방법 (페이스북 소셜댓글 달기) | 기톨닷컴 | 2014.08.30 |
|
카메론 플러그인 에드온이 컨텐츠(본문)을 가릴때 팁
| oscarmike | 2014.08.30 |
| 게시판의 오늘 올라온 새글의 갯수를 알아내는 방법 [8] | garnecia | 2014.08.22 |
| 캡챠(captcha)가 안 뜰 때 | Double'U' | 2014.08.29 |