티스토리 뷰
<!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 |