HTML img 태그 CSS vertical-align 속성으로 이미지 수직 정렬

스타일시트 CSS

HTML img 태그 CSS vertical-align 속성으로 이미지 수직 정렬

 

환경: Eclipse Mars

 

HTML 에서 이미지는 하나의 텍스트로 인식합니다. 그런데 이미지는 크고 텍스트는 상대적으로 작기 때문에 옆으로 나란히 정렬되면 기본적으로 이미지의 하단 옆에 위치합니다. CSS vertical-align 속성은 이런 텍스트의 위치를 조절할 수가 있습니다.

 

이미지와 텍스트를 조절하기 위한 형식은 다음과 같습니다. img 태그에 속성으로 veritcal-align 을 사용합니다. 값은 3가지가 있는데 text-top, text-middle, text-bottom 입니다. 단어에서 의미하듯 이미지에서 텍스트를 상단, 중앙, 하단으로 배치할 수 있습니다.

 

<img src=”이미지경로” style=”vertical-align: text-top/text-middle/text-bottom”>

 

아래 샘플은 vertiacl-align 속성을 적용하지 않았을 때 모습입니다. 이미지가 텍스트보다 크게 되면 이미지 하단에 위치하게 됩니다. 글이 브라우저 크기를 벗어나면 바로 밑으로 나열이 되겠죠.

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>HTML</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	img {
		height:90px;
		border-style: solid;
	}
</style>
</head>
<body>
	<img src="butterfly.ico">
	나비는 자유를 상징한다.
</body>
</html>

 

HTML img 태그 CSS vertical-align 속성으로 이미지 수직 정렬

 

아래 샘플은 스타일시트 vertiacl-align 사용해서 텍스트를 상단, 중앙, 하단에 배치했습니다. 글자가 길 경우 이미지를 감싸는 형태의 배치를 하고 싶다면 text-top 을 사용하시면 되겠죠.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>HTML</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	img {
		height:90px;
		border-style: solid;
	}
</style>
</head>
<body>
	<img src="butterfly.ico" style="vertical-align:text-top">
	나비는 자유를 상징한다.<br/><br/>
	<img src="butterfly.ico" style="vertical-align:text-middle">
	나비는 자유를 상징한다.<br/><br/>
	<img src="butterfly.ico" style="vertical-align:text-bottom">
	나비는 자유를 상징한다.<br/>
</body>
</html>

HTML img 태그 CSS vertical-align 속성으로 이미지 수직 정렬

 

저작자 표시 비영리 변경 금지
신고
Posted by 녹두장군