검색창 가운데 정렬이 되지 않는 경우

만든 웹사이트의 검색창

 

검색기능을 구현하기 위해 검색창을 만들었다. 조금 더 멋진 검색창 구현을 위해 네이버 소스코드를 뜯어와 내꺼화 시켰다. css 검색 부분을 전면 수정하던 중 해결되지 않는 문제에 골머리를 앓았다. 텍스트를 입력하면 가운데에 입력이 되지 않고 아래에 입력이 된다는 것이다. 여러가지 시도를 해봤지만 실패했다. 대표적인 시도는 두개다.

 

try1

height-line값을 width 값과 동일하게 설정해 가운데 정렬을 하려고 했다. 구글 검사로 해보니 인풋창이 조금 아래로 설정돼 있고 이 부분을 고치면 가운데에 글씨를 쓸 수 있을 줄 알았다. 하지만 여전히 글씨는 아래에 있었다.

 

try2

서치 박스 인풋창을 따로 만들어 거기에 소스코드를 입력했다.

.search-box input {
  position:relative;
  top: -10px;
}

이 부분을 넣으니 됐다. position:relative는 박스를 움직일 수 있게 해주는 기능을 한다. top에 20px을 먼저 주니 아래로 가져서 반대로 -20px를 주니까 이동했다.