vertical-align: middle 속성이 적용되지 않을 때 해결 방법

최상위 <div> 안에 button, div, button이 있을 때 수직 정렬이 되지 않는 문제가 있었다. 

이미 최상위 <div>의 자식 <div>는 가운데 정렬되어 있다고 생각해, <button>에게만 vertical-align: middle;을 줬다. 하지만 버튼들은 여전히 수직 정렬이 되지 않는 문제가 있었다. 

 

결과적으로 vertical-align: middle; 속성을 <button>뿐만 아니라 자식 <div>에게도 줬어야 했다.

적용시키고자 하는 요소가 있을 때 그 주변 요소들도 모두 같이 적용시켜줘야 수직 정렬이 되기 때문이다. 

흠 vertical-align에 대해 깊게 공부해보고 있는데 자식 <div>에게만 vertical-align: middle; 속성을 주면 버튼들이 수직 정렬되는 것을 확인할 수 있었다. vertical-align 이 놈이 진짜 골 때리는 놈이라서 이 부분은 조만간 자세히 정리를 할 예정이다.

 

결과 화면

728x90

반응형

 

 

 

---

질문이나 잘못된 점은 댓글로 남겨주세요 :)💖