웹마스터 팁


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 속성을 이용해서 공백을 넣었기 때문에 좌우 정렬은 약간의 오차가 발생할 수 있다.
제목 글쓴이 날짜
모달 윈도우 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 로그인 동시 구현하기 file 큐우우 2014.08.31
XE에 페이스북 소셜 댓글 연동하는 방법 (페이스북 소셜댓글 달기) 기톨닷컴 2014.08.30
카메론 플러그인 에드온이 컨텐츠(본문)을 가릴때 팁 file oscarmike 2014.08.30
게시판의 오늘 올라온 새글의 갯수를 알아내는 방법 [8] garnecia 2014.08.22
캡챠(captcha)가 안 뜰 때 Double'U' 2014.08.29