height를 지정한 뒤 line-height를 동일하게 지정하면 됩니다.
그러면 글자가 input 요소의 수직 가운데로 오게 됩니다.
.some-text-input {
height: 2em;
line-height: 2em;
}아래 내용은 참고하실 필요가 없습니다. 아래 내용은 IE7까지 현역이던 시절 작성한 것입니다. 오늘날 브라우저에는 필요없는 내용입니다.
input 박스의 사이즈가 크면 보기도 좋고 클릭해서 입력하기도 좋다.
미적인 것과 사용성 둘 다를 충족하는 좋은 방법이라고 생각한다.
그런데 css로 height 를 지정하면 난감한 일이 발생하곤 한다.
높이가 높은데 커서가 맨 위에 딱 붙어 있게 되는 것이다.
아래는 모두 height: 25px을 input에 준 경우다.
이건 IE7에서 padding을 5px로 지정한 놈이다.
어떤 브라우저든지 padding:5px인 게 height를 지정하는 것보다 더 낫다.
submit 버튼과 입력 박스가 서로 줄이 좀 안 맞는 게 있는데, 이건 submit 버튼에 vertical-align: top 을 줘서 해결한다.
인풋 박스 높이를 지정하면서 보기좋게 만드는 다른 방법
height를 지정하고 line-height를 height와 동일하게 지정해 주면 된다고 한다.
댓글 남기기