반응형
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>
▼ 아래 샘플은 스타일시트 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>
반응형
'웹 프로그래밍 > 스타일시트 CSS' 카테고리의 다른 글
스타일 시트 CSS 공백 문자, 빈칸, 줄 바꿈 처리를 위한 white-space 속성 사용하기 (0) | 2019.02.21 |
---|---|
스타일 시트 CSS 텍스트 꾸밈과 관련된 스타일 모음 (0) | 2019.02.12 |
스타일 시트 CSS 값을 표현하는 절대단위 와 상대단위 알아보기 (0) | 2019.02.02 |
스타일 시트 CSS 글꼴 font 꾸밈 관련 속성 알아보기 (0) | 2019.01.06 |
인터넷 사이트를 통해 CSS 소스코드 한번에 정렬하는 방법 (2) | 2018.11.21 |
스타일 시트 CSS 모서리 기능 이용해서 버튼 만들기 (0) | 2018.10.21 |
스타일 시트 CSS box-shadow 속성, 그림자 추가하는 방법 (0) | 2018.10.10 |
스타일 시트 CSS border-radius 속성, 테두리, 모서리를 타원으로 표시하기 (0) | 2018.09.17 |