Table 레이아웃 숙제 질문 있습니다.

질문 코드 링크

https://codepen.io/uscgil0127/pen/qBVeNOa

--------------------------

안녕하세요~ 테이블 레이아웃 관련해서 질문 있습니다.

요구 사항 다 만들었는데요. 제가 동그라미 친 부분을 어떻게 가운데 정렬 시켜야 할지 모르겠어요.

질문 1)

동그라미 친 부분에 vertical-align : center , middle 이런 것도 안 먹고.  margin-top 도 안 먹습니다.  마진 컬렙스 인가?? 해서 td 태그와 이미지 태그에 약간의 패딩 값을 줘받는데요.  margin-top이 안 먹어요 ㅠ.ㅠ 왜 이런 현상이 발생하나요??

질문 2)

그래서, 고민 끝에 방법은 하나 찾았는데,   

<div class="test">

<span class="logo">SONY</span> <br /><span class="describe">FE 70-200 mm</span>

</div>

이 div태그에 position: relative; top: 30px; 이렇게 해서 가운데로 오게끔 밀수는 있더라구요.

그러면, 또 문제가 되는게 반응형 값으로 사이즈가 작아질 때, SONY 와 밑에 설명 부분이 아래 경계를 넘어서 너무 밑으로 가요.

고민 끝에 해결한 방법은 미디어 쿼리로 사이즈 별로 속성 값을 다르게 주는 것 말고는 찾지 못했는데요.

이 외에 어떤 방법으로 동그라미 친 부분을 가운데 정렬 시킬 수 있나요?? 

다른 글자들은 가로세로 가운데 정렬 다 잘 먹히는데, 왜 저 부분만 말썽이 나는지 잘 모르겠네요.