html input text vertical 와 a 태그와 이미지 세로 정렬 정리

Posted by 에브리플라워
2015.08.13 12:53 프로그래밍/Web
매번할 때마다 뒤적이고 했던 것을 소스에서 뒤져보고 찾고 했는데, 
아에 매번 틀을 갖고 있다가 붙여서 쓰려고 이렇게 정리합니다.

<a href='#'>< </a>
<input type='text' value=''/>
<a href='#'>> </a>


이미지 없이 단순하게 꺽쇠(<, >)로 버튼모양을 대신하려고 합니다. 
가장위에 있는 그대로 타이핑 하게 되면 아래 그림처럼 나오게 됩니다.


우선 a태그의 속성을 떼어보도록 하겠습니다. css로 설정을 하면 됩니다.

a{text-decoration:none;}

또는

<a href='#' style="text-decoration:none;"><</a>

이렇게 하면 꺽쇠에 있는 색상이나 밑줄은 사라집니다.
사실 텍스트를 버튼처럼 사용하겠다고 하면 더 이상 작업은 필요가 없습니다.

하지만 이미지를 버튼으로 <a> 태그에 사용하게 된다면,
<input>과 <img> 태그의 높이가 다르다면 문제가 생기는데 위 아래로 어긋나게 되는 것이지요.


이 문제는 <a> 태그 하나에게만 주어지는 속성을 주면됩니다.

a{vertical-align:middle;}

또는 

<a href='#' style='vertical-align:middle;'></a>


은근히 방향을 잘못잡았다가 고생한 적이 있어서 남깁니다.
부디 도움되시길 바랍니다.





이 댓글을 비밀 댓글로
  1. 내용을 추가하려고 했는데, 댓글로 남깁니다.
    a태그에 display:inline-block도 주셔야 딱맞게 세로 중앙 정렬이 됩니다~

티스토리 툴바