設置了letter-spacing行間距text-aligin不居中

設置了letter-spacing之後字符偏左，如圖:

<input type="button" class="submit-button" value="登錄" v-on:click="login"/>

.submit-button {
    display: block;
    width: 100%;
    margin: 40px 0 20px;
    color: #FFFFFF; 
    background-color: #2198E6;
    cursor: pointer; /*顯示小手*/
    border: none;
    line-height: 40px;
    font-size: 16px;
    text-align: center;
    letter-spacing: 1em; /*文字間隔*/
    border-radius: 20px;
    outline: none;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s; 
}

解決方法 ： 添加屬性 text-indent: 1em; /*首行縮進*/

.submit-button {
    display: block;
    width: 100%;
    margin: 40px 0 20px;
    color: #FFFFFF; 
    background-color: #2198E6;
    cursor: pointer; /*顯示小手*/
    border: none;
    line-height: 40px;
    font-size: 16px;
    text-align: center;
    letter-spacing: 1em; /*文字間隔*/
    text-indent: 1em; /*首行縮進，文字間隔後居中*/
    border-radius: 20px;
    outline: none; /*無邊框*/
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s; /*動畫一直生效*/
}