Button with a bigger text centering issue - html

Question

I´m trying to do some buttons with image and text, and I already did this work.
But now I´m studying a diferente hypothesis, If I have a text bigger I´m trying to center the text in the button but I´m not having sucess put this right. I´m not having succeess putting my very big is not good align-center just below the 1st text.
Have you ever had a case like this? How we can solve this?
I have this Html for two buttons:
<button class='btn'>
<img class="big_btn" src="icon1.png" width="40" height="40"/>
Big button so big <span> very big is not good</span>
</button>
<button class='btn'>
<img src="icon1.png" width="40" height="40">
2button big
</button>
And I have this css file:
.btn {
position: relative;
width: 180px;
height: 60px;
margin-top:7%;
padding: 0 10px 0 10px;
line-height: 37px;
text-align: left;
text-indent: 10px;
font-family: 'bariol_regularregular';
font-size: 15px;
color: #333;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #f1f1f1; /* button background */
border: 0;
border-bottom: 2px solid #999; /* newsletter button shadow */
border-radius: 14px;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #999;
box-shadow: inset 0 -2px #999;
}
.btn:active {
top: 1px;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn img { float: left;}
.btn .big { margin-top:10px;}
.btn:hover { background-color: #f7f7f7;}
Here's the Fiddle: http://jsfiddle.net/3F9pu/
My image updated:

Answer 1

Your problem is your line-height attribute. If you set that to be 37px, each new line of text will be separated by 37px. Remove `line-height:37px and the text will wrap around the image.
line-height: 37px
I also removed your text-indent and replaced it with a margin on your floated image to make the text all align properly.
.btn img{
float:left;
margin-right: 10px;
}
text-indent: 10px
JSFiddle

Answer 2

Use a CSS background image.
Have a fiddle - 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;
}