채택완료

이미지와 글씨를 수직적으로 나란히 정렬시키려면?

b831315ac3659ed73dfbfda1074a99e5_1417409685_337.jpg 를    b831315ac3659ed73dfbfda1074a99e5_1417409436_3808.jpg그누보드  처럼 보이게 하려면?
 

<a href="http://sir.co.kr" ><img src="http://sir.co.kr/data/cheditor4/1412/b831315ac3659ed73dfbfda1074a99e5_1417409436_3808.jpg">그누보드</a> 

위 소스를 그림과 글씨과 수직으로 나란히 정렬시키려면 어떻게 해야 하는지?

즉, 그누보드 글씨를 이미지 높이 중단 쯤으로 보내려면?

vspace 경우 html5에서는 더 이상 적용이 안되기 때문에, css로 어떻게 처리해야 하는지?

padding margin 어케 줘가면서 용을 써봤는데 잘 안 되네요.

|

답변 2개 / 댓글 2개

채택된 답변
+20 포인트

img {vertical-align:middle}

이 정도만 해줘도 어느 정도는 맞을겁니다.

답변에 대한 댓글 1개

vertical-align:숫자% 값을 주니까 알맞게 조정이 되었네요. 고맙습니다.

<a href="" style="background-image:url(주소); line-height:50px" >그누보드</a> 

 

line-height 로 조정 하시면됩니다. % 혹은 px로 주시면 됩니다.

답변에 대한 댓글 1개

이미지가 좀 조그마한 파비콘과 글씨를 나란히 하려고 하는데, 이미지를 배경 처리한 위 형식은 좀 안 맞을 듯 합니다. ^^;

덕분에 특별한 형식의 링크를 배웠네요. 고맙습니다.

답변을 작성하려면 로그인이 필요합니다.