웹마스터 팁
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
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| 관리자 로그인시 원하는걸 보여주자 [5] | 빽짱구 | 2008.04.15 |
| 수정,삭제 버튼을 "이 게시물을.."에 넣기 [1] | hangoon | 2008.04.16 |
| 엑소버드 음악 제로보드XE에 구겨넣기... [8] | artlab | 2008.04.17 |
| ARTLAB님 팁을 참고하여 약간 변형 & 쫄쫄이 스토커 해상도에 상관없이 달기 [3] | 탑심 | 2008.04.18 |
| 글 순서 바꾸기 임시방편 [6] | 장운주 | 2008.04.18 |
댓글창에서 프로필이미지가 없는 경우 기본이미지 출력하기
[8]
 | 카카달려 | 2008.04.19 |
|
zbxe 기본글꼴(폰트) 바꾸는 방법
[9]
| 핸디지 | 2008.04.22 |
| 디버그모드 변경하는 간단한 파이썬 스크립트 [4] | mmx900 | 2008.04.23 |
| 제로보드XE에 배경음악 달기 [4] | Dr.Mabin | 2008.04.26 |
|
졸졸이 스토커 가두어보기 2탄(보드우측에 포함된 것처럼)
[1]
| 갯가 | 2008.04.26 |
| 제로보드에 BGM 달기 (대폭 수정;;) [5] | Dr.Mabin | 2008.04.27 |
| 각 페이지에 쓸 수 있는 변수명들 찾기 [6] | lainfox | 2008.04.29 |
| 링크가 걸린 글의 색을 무지개색으로 나타내기 | 재미니님 | 2008.04.29 |
|
홈페이지에 이미지블릿 대신 특수문자로 표현해 보기
| 팔공산 | 2008.04.29 |
|
windows Live writer로 게시글 쓰기
[3]
| tindrum | 2008.04.29 |
| 최근글 - 본문 내용 뽑아내기 [9] | 夜飛 | 2008.05.01 |
| 상단에 PHP 오류구문이 출력될시 [6] | sbshs77 | 2008.05.01 |
| 제한된 시간 안에 글을 또 등록할 때 IP 금지 기능(스팸필터) 해제하기 [3] | 비나무 | 2008.05.03 |
| 메인메뉴에서 2차메뉴가 1차메뉴를 따라다니는 롤오버 메뉴로 만들기 [13] | 우야노 | 2008.05.03 |
|
주문형게시판 만들기
[22]
| 팔공산 | 2008.05.04 |