티스토리 뷰
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
h1 {
background: silver;
}
.super {
vertical-align: super;
font-size: 0.7em;
background: yellow;
}
.sub {
vertical-align: sub;
font-size: 0.7em;
background: aqua;
}
.top {
vertical-align: top;
}
.middle {
vertical-align: middle;
}
.bottom {
vertical-align: bottom;
}
</style>
</head>
<body>
<h1>인라인 요소의 수직 위치 지정</h1>
<p>
X<span class="super">2</span>와 같이 윗첨자가 적용된 모습
</p>
<p>
H<span class="sub">2</span>O와 같이 아랫첨자가 적용된 모습
</p>
<p>
<img class="top" src="images/verticalAlign01.jpg" width="90"
height="70" alt="영국 리즈캐슬의 잔디 정원" />이미지 요소에 vertical-align:top이 적용된
모습
</p>
<p>
<img class="middle" src="images/verticalAlign02.jpg" width="90"
height="70" alt="영국 리즈캐슬의 호수와 나무" />이미지 요소에 vertical-align:middle이
적용된 모습
</p>
<p>
<img class="bottom" src="images/verticalAlign03.jpg" width="90"
height="70" alt="영국 리즈캐슬의 호수 풍경" />이미지 요소에 vertical-align:bottom이
적용된 모습
</p>
</body>
</html>
인라인 요소의 수직 위치 지정
X2와 같이 윗첨자가 적용된 모습
H2O와 같이 아랫첨자가 적용된 모습
이미지 요소에 vertical-align:top이 적용된 모습
이미지 요소에 vertical-align:middle이 적용된 모습
이미지 요소에 vertical-align:bottom이 적용된 모습
'java,web study > 5주차 (7월 29일~8월 4일)' 카테고리의 다른 글
Box Shadow (0) | 2013.08.01 |
---|---|
Text Shadow (0) | 2013.08.01 |
font를 이용한 단축 표현 (0) | 2013.08.01 |
z-index (0) | 2013.08.01 |
'>' 식별자 사용(자손) 테이블 속성 스타일 바꾸기 (0) | 2013.07.31 |
- Total
- Today
- Yesterday
- 메모장
- 소켓
- 자바스크립트
- SQL
- 충북대
- 안드로이드
- ERP
- HTML
- jsp
- JQuery
- SVN
- 파이썬
- CSS
- 게임
- 배열
- db
- 프로젝트
- 정렬
- 아두이노
- 정보
- 청주
- 데이터베이스
- 알고리즘
- 오라클
- 클래스
- 자바
- 도전과제
- 이론
- 잡담
- 졸업작품
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |