차림

2007년 7월 22일

그림을 가운데로 놓기

CSS를 써서 그림을 가운데로 놓은 법을 설명하려고 한다. 여기엔 두 가지 방법이 있다.

div 이용하기

그림을 div 태그로 감싸고 div 안을 가운데로 정렬하면 된다.


<style type="text/css">
<!--
div.center { text-align: center; }
-->
</style>

그림만 있는 경우

<div class="center">
<img src="sample.jpg" alt="예시용 그림" />
</div>

그림과 설명이 있는 경우

<div class="center">
<img src="sample.jpg" alt="예시용 그림" /><br />그림 설명
</div>

그림 밑에 설명을 붙이면 그림과 설명 모두 가운데로 온다.


불여우 로고

그림을 형님 태그로 만들기

display: block으로 img 태그를 형님 태그처럼 만든 뒤 형님 태그를 가운데로 놓을 때 하듯이 margin을 이용해 가운데로 오게 한다.


<style type="text/css">
<!--
img.center { display: block; margin: 1em auto; }
-->
</style>

<img class="center" src="sample.jpg" alt="예시용 그림" />

위에서 margin1em은 그림의 상하 여백을 지정한 것으로 바꿀 수 있다. 중요한 건 margin에서 가로를 auto로 두어야 한다는 점이다.

그림 아래에 설명을 붙이고 그림과 설명 모두 가운데로 오게 할 때는 첫 번째 방법이 좋고, 그림만 가운데로 오게 할 때는 두 번째 방법이 편하다.

목록