CSS 세로 텍스트 맞춤

Question

나는 이미지와 범위가 포함 된 div가 있습니다. 스팬의 텍스트가 이미지와 중간 정렬되도록하고 싶습니다. 당연히, 귀하의 편의를 위해 fiddle을 만들었습니다.

• span {vertical-align:middle;}이 아무것도하지 않는 것 같다

  <div id="legend"> 
      <img src="http://fate.holmes-cj.com/plus.png"/> 
      <span> * 5</span> 
  </div> 
  

  가 여기 해봤 것들 중 일부입니다 : 여기
  는 HTML입니다.
• span {vertical-align:top;}은 이미지의 상단에 텍스트를 정렬합니다. top이 작동하면 middle도 그렇게 생각할 것입니다.
• span {vertical-align:20px;}은 내가 원하는 것을 제공하지만 div 높이, 이미지 높이 및 글꼴 크기에 따라 다르며 상호 작용합니다.
• display:table-cell을 추가하면 다른 곳에서 제안되었지만 Chrome에서는 아무런 관련이없는 것처럼 보입니다.

내 Fate Dice Roller에서 문맥 상 문제를 확인할 수 있습니다. "롤"을 몇 번 클릭하고 히스토그램 위로 마우스를 이동하십시오. 주사위 굴림에서 깔끔한 통계를 얻지 만 텍스트 부분이 잘못 정렬됩니다.

나는 여기에서 운이 좋지 않습니까? 아니면 수직 배열이 정말로 지저분 해 야합니까? 글꼴 크기를 변경할 때 조정할 필요가없는 솔루션을 좋아합니다. 여기

Answer 1

당신은 이동 :

http://jsfiddle.net/nYbwf/3/ 그냥 vertical-align: middle 이미지 요소에, 그 방법이를 대신베이스 라인의 중앙에 수직으로 정렬됩니다.