배경 이미지에 텍스트 가운데 맞추기

Question

나는 배경 이미지가 있습니다. 총 가격을 표시하는 기타를 포함합니다. 장치 화면이 작은 경우

Live demo

표시 할 수가 0이 배경 화상의 중간베이스 중앙 :

I 화면의 크기를 조정하는 경우 (큰) 첫 번째 스크린 샷과 같이 번호가 더 이상 삽입되지 않습니다.

더 큰 w로 화면의 크기를 조정 한 후 어떻게 표시합니까? 너비가 첫 번째 사진과 같습니까?

Answer 1

i는 0 DIV에 정적 폭을 제공하기 위해 제안 :

.total{ 
position:absolute; 
background-color:aqua; 
font-weight: bold; 
font-size:10px; 
text-align:center; 
width: 40px; <---- 
left: 5%; 
bottom:14px; 
} 

Answer 2

가 .total

.total{ 
    background-color:aqua; 
    font-weight: bold; 
    font-size:10px; 
    text-align:center; 
    width: 90%; 
    vertical-align: middle; 
    display: inline-block; 
} 

Working Fiddle