단추 안에 텍스트를 배치하는 방법은 무엇입니까?

Question

버튼 내부에 전형이 아닌 이미지 배경을 사용합니다. 나는이 텍스트를 기본값보다 단추 내부에 "더 높게"보이게 만들 필요가있다. 내가 뭘해야되는거야?

CSS :

.button { 
    width: 211px; 
    height: 66px; 

    font-family: Arial, Helvetica, sans-serif; 
    font-size: 18px; 
    text-transform: uppercase; 
    color: white; 

    background: url('../img/button.png') no-repeat; 
    border: none; 
    cursor: pointer; 
} 

HTML : 브라우저에서

<input type="submit" class="button" value="Submit"/> 
(...) 
<button class="button">Get a quote</button> 

화면 :

지금

입니다 당신은 버튼의 텍스트가 조금 더 높아야한다 볼 수 있듯이

Answer 1

padding-bottom을 설정하십시오.

button{ 
     width: 300px; 
     height: 300px; 
     padding-bottom: 200px; 
} 

The demo.

Answer 2

정확한 해결책은 어떤 conte NT를 정확히 버튼에 위치하지만 일반적인 생각입니다 :

• 는
• 는 블록 요소를 바닥 패딩을주고 넣어 (A <div> 잘 할 것)을 <button> 요소
• 장소 내부 블록 요소를 사용하여 그 안에 당신의 텍스트

See it in action.

버튼을 확대하고 싶지 않은 경우 블록 요소 position: relative 및 음수가 top 일 수 있습니다.

See it in action.