HTML 이미지, 글씨 가운데 정렬방법

 

이번에는 HTML 중앙정렬에 대하여 살펴보겠습니다.

 

그다지 어렵지 않으나 필요한 경우가 자주 있기 때문에

기억해두는 것도 괜찮을 것으로 여겨집니다.

 

 

1. 글씨를 중간정렬하기

 

아주 많이 사용하는 태그죠.

방법과 사례를 통하여 알기 쉽게 알려드리도록 하겠습니다.

 

<center> 문자 </center>

 

'center'사이에 원하는 문자를 넣어주면 되겠습니다.

/는 처음에 열었는 것을 닫아주는 의미로 해석하면 됩니다.

 

2. 이미지를 가운데 정렬하기

 

글씨가 아닌 이미지의 경우도 위와 비슷한 방법입니다.

문자 부분에 이미지 소스를 부르는 태그를 넣어주면 되겠죠.

 

<center> <img src="이미지 주소"> </center>

 

또는 이미지의 크기를 입력하는 경우에는 로딩속도가 더욱 빠릅니다.

 

<center> <img src="주소" width="이미지의 가로 길이" height="이미지의 세로 길이" border="0"> </center>

 

두 가지의 방법을 모두 사용해도 괜찮습니다.

아래의 방법이 더욱 정확한 방법이지만,

어차피 이미지를 부를 때 웹상에서 크기를 자동계산하므로

위의 방법으로 해도 무관합니다.

 

3. 투명한 표 안에 이미지를 가운데 정렬하기

 

표 안에 이미지를 센터로 정렬하는 것은

다른 문서와 구별하기가 쉽고,

다음에 편집할 때 절차가 간단하기 때문에

HTML태그를 조금 만지는 분들이 많이 애용하는 듯 합니다.

 

<table border="0" width="100%">
    <tr>
        <td width="100%">
            <p align="center"><img src="이미지 주소"></p>
</td>
    </tr>
</table> 

 

어렵지 않으시죠?

'border'=0은 표의 굵기가 0이라는 뜻으로 투명한 표입니다.

'width'=100%는 표의 폭을 100%로 했다는 것이죠.

정확한 넓이를 정하면 사용자마다 폭이 다를 수 있기 때문에

100%로 설정해주었습니다.

 

이외에는 위의 방법과 거의 비슷하다고 보면 되겠습니다.