CSS 버튼에서 텍스트를 세로 및 가로로 맞 춥니 다

Question

CSS 모양이 단추 모양으로되어 있습니다. 내가 가지고있는 문제는 버튼이 185px 너비와 75px 높이 여야한다는 것입니다. 어느 것이 옳은가,하지만 버튼의 텍스트가 어딘가에 왼쪽 상단에 떠있다.

텍스트를 단추 중간에 정확하게 표시하려면 어떻게합니까? 나는 당신이 그것을 확인할 수 있도록 JSfiddle을 만들었습니다.

//Ignore this comment. 

Answer 1

변경 line-height에 높이와 text-align:center

.button-large{ 
    text-decoration: none; 
    display: inline-block; 
text-align:center; 
    width: 185px; 
    line-height: 75px; 
    font-family: sans-serif; 
    color: rgb(116, 79, 145); 
    font-size: 24px; 
    padding: 10px; 
    text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.6); 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    background: rgb(156, 125, 185); 
    background: -moz-linear-gradient(90deg, rgb(156, 125, 185) 30%, rgb(170, 150, 201) 70%); 
    background: -webkit-linear-gradient(90deg, rgb(156, 125, 185) 30%, rgb(170, 150, 201) 70%); 
    background: -o-linear-gradient(90deg, rgb(156, 125, 185) 30%, rgb(170, 150, 201) 70%); 
    background: -ms-linear-gradient(90deg, rgb(156, 125, 185) 30%, rgb(170, 150, 201) 70%); 
    background: linear-gradient(0deg, rgb(156, 125, 185) 30%, rgb(170, 150, 201) 70%); 
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.4); 
    -moz-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.4); 
    box-shadow:   0px 2px 1px rgba(0, 0, 0, 0.4); 

} 

DEMO