티스토리 뷰

<!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
css로 문자 정렬하기  (0) 2013.08.01
font를 이용한 단축 표현  (0) 2013.08.01
z-index  (0) 2013.08.01
'>' 식별자 사용(자손) 테이블 속성 스타일 바꾸기  (0) 2013.07.31
TAG
,
댓글
댓글쓰기 폼