CSS : 디스플레이 인라인 블록을 사용하여 텍스트를 요소에 맞 춥니 다

Question

옆에 짧은 텍스트가있어서 링크를 만들어야합니다. 링크는 텍스트로 볼 수 없으며 이미지로 표시되어야합니다. 지금까지 아무런 문제가 없지만 이미지를 사용하려면 display:inline-block 태그의 너비/높이를 설정할 수 있어야합니다. 내가 할 수있게하자마자, 오른편 옆에 있던 다음이 포함 된 div에서 아래쪽으로 점프합니다. 나는 절대적으로 그것을 위로 움직일 수 없다. 코드는 다음과 같습니다

<div> 
    <p id="pid">Some prefixing text that shouldn't be at the bottom of the div but rather in the middle <a href="#" target="_blank">This is some link</a></p> 
</div> 

#pid { 
    border: 1px solid blue; 
    float: right; 
} 
#pid a { 
    display: inline-block; 
    width: 50px; 
    height: 53px; 
} 

http://jsfiddle.net/DxVQr/1/

그래서 어떻게 위로 접두사 텍스트를 이동할 수 있을까? 고마워요!

Answer 1

<a> 태그의 vertical-align: middle이 작업을 수행합니까?