在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