시리즈 "찾다가 알게된 정보!"는 오류나 막히는 부분에서 왜 안되는가... 찾다가 신박해서 혹은 잊지않으려고 기록해두는 시리즈입니다.
문제 상황
오늘은 동아리 단체 프젝으로 파일선택을 위한 input태그를 label과 함께 써보았는데요..
label에 다른 정보는 다 작동하는데 vertical-align:middle;이 자꾸 작동이 안되더라구요 ㅠㅠ
그래서 사진처럼 "사진 변경하기" 글자가 위로 올라가있어서 몇시간동안 이런저런 짓 다해보다가 그 이유를 알게되었습니다.
해결 과정
오늘도 stackoverflow에서 해결을 해보고자 했습니다.
https://stackoverflow.com/questions/1554941/vertical-align-text-in-a-label
Vertical Align text in a Label
I have been asked to vertically align the text in the labels for the fields in a form but I don't understand why they are not moving. I have tried putting in-line styles using vertical-align:top; and
stackoverflow.com
1) inline? inlin-block?
label태그는 block 태그라서, inline과 inline-block태그에만 작동하는 vertical-align:midlle'은 적용되지 않았던 거라길래 display:inline-block;을 넣어봤어요... 그런데도 그대로더라구요..ㅠㅠㅠㅠㅠ
그래서 한번 더 stackoverflow의 다른 해결책들을 읽어보았어요.
2) line-height
line-height값을 설정해보라는 말도 있었지만 이것도 물론 실패....
line-height:1em; margin:2px 5px 3px 5px; padding:2px 5px 3px 5px; 이걸 그대로 넣어봤는데...
padding만 작동하고... 글자는 내려갈 기미가 안보이네요...
해결
3) padding
그냥 보더 안의 글자니까 패딩을 손봐보자...! 하고 모든 padding:0;을 한 뒤 padding:0.5em;으로 사이즈를 조절해줬더니 해결이 되었어요!!