블록 요소로 표시된 링크의 텍스트 위치

Question

블록 요소 안에 텍스트를 배치하는 가장 좋은 방법을 알고 싶습니다. 배경

display: block; 
width: 100px; 
height: 100px; 
background: #000000; 

텍스트와

<a href="#">foo</a> 

정상 링크 만 표시 블록으로 스타일은 이제 왼쪽 상단입니다. 이제 질문 :이 텍스트를 예제로 가져 오는 가장 좋은 방법은 무엇입니까? 왼쪽 하단 또는 오른쪽 하단?

나는 A-Tag 안에 새로운 요소가없는 CSS 솔루션을 선호합니다. 의견이 있으십니까?

Answer 1

하단에 앉아서 콘텐츠를 선택할 수 없습니다. 패딩 (padding-top)을 사용함으로써, ist가 맨 아래에 맞춰진 것처럼 수동으로 만들 수 있습니다. 그래서 위의 예에서

display: block; 
width: 100px; 
height: 14px; 
background: #000000; 
padding-top: 86px 

Answer 2

당신은 또한 디스플레이의 사용을 만들 수있는 시도 : 테이블 셀 - 그러나, = IE7

http://jsfiddle.net/QU9gy/

<에서 작동하지 않습니다

Answer 3

이 시도 할 수 있습니다 너무. 당신이 182px 그래서 총 결코 200 픽셀 될 것입니다 것 라인 높이보다 18px 글꼴을 사용하는 경우

display: block; 
width: 100px; 
height: 100px; 
background: #000000; 
line-height:188px; 
font-size:12px; 
color:#fff; 
text-decoration:none; 

당신이 200 픽셀에서 값보다 감소보다 글꼴 크기를 변경하는 경우

는 :) 의미;