按钮具有更大的文本居中问题

Answer 1

使用CSS背景图片。

有一个小提琴 - Fiddle Link!

HTML

<button class='btn'>Big button so big very big is not good</button>
<button class='btn'>2button big</button>

CSS

.btn {
    background: url("http://lorempixel.com/output/cats-q-c-40-40-3.jpg") #CCC 10px no-repeat;
    border: none;
    padding: 10px 10px 10px 60px;
    width: 200px;
    text-align: left;
    vertical-align: top;
    min-height: 60px;
    cursor: pointer;
}
.btn:hover {
    background-color: #F00;
}

Answer 2

您的问题是line-height属性。如果将其设置为37px，则每个新文本行将以37px分隔。删除`line-height：37px，文本将环绕图像。

  

line-height：37px

我还删除了您的text-indent并将其替换为浮动图片上的边距，以使文本都正确对齐。

.btn img{
    float:left;
    margin-right: 10px;
}

  

text-indent：10px

JSFiddle