Trying to use an image and text inside a <button> - html

Question

Im trying to have a button with format like I have in my image 1.
Where I have a div with background red at left, and inside this div I have an image, and I want this image aligned at center of my div.
And then I have the text of my button at right of my red div.
Image 1:
But What Im having is this:
Image 2
I dont have my image at center of my red div, and my button text is stucked in my div.
Do you see what Im doing wrong?
This is my fiddle with issue Im having: http://jsfiddle.net/nXuU2/2/
This is my html
<button class="btn">
<div id="btn_container"><img src="http://placehold.it/30x30" width="30" height="30"/></div>
<span>Button link 1</span>
</button>
And my CSS:
.btn
{
position: relative;
width: 200px;
height: 60px;
margin-bottom:20px;
padding: 0 10px;
text-align: left;
font-size: 16px;
color: #333;
background:gray;
}
#btn_container
{
width:40px;
height:40px;
border-radius:5px;
background:red;
float:left;
}
.btn img
{
margin-right: 10px;
vertical-align:middle;
}
.btn span
{
display:inline-block;
width: 120px;
vertical-align:middle;
}

Answer 1

Just playing with CSS positioning here, make your div with the red background position: relative; and use absolute for your img tag
Demo
.btn img {
left: 50%;
margin-left: -15px; /* 1/2 of total width of your img */
top: 50%;
margin-top: -15px; /* 1/2 of total height of your img */
position: absolute;
}
Demo 2 (Alternate way to do this, you won't need CSS positioning)
In the Demo 2, you won't need CSS positioning, just remove margin-right from .btn img and use text-align: center; on #btn_container, and lastly, apply margin-top to .btn img
I don't think that you will need a wrapping element for background-color, just apply to img tag, so if you don't want to use your wrapping element than refer the solution below ..
CSS
.btn img {
display: inline-block;
vertical-align: middle;
background: #f00;
padding: 5px;
border-radius: 5px;
}
HTML
<button class="btn">
<img src="http://placehold.it/30x30" width="30" height="30"/>
<span>Button link 1</span>
</button>
Demo 3

Answer 2

Try out the below HTML and CSS code:
HTML Code:
<button class="btn">
<div id="btn_container">
<img src="http://placehold.it/30x30" width="30" height="30"/>
<span class="btn-txt">Button link 1</span>
</div>
</button>
CSS Code:
.btn {
background: #fff;
border:3px solid grey;
padding: 5px;
width: 200px;
text-align:left;
}
#btn_container img {
border: 6px solid red;
margin-right: 5px;
vertical-align: middle;
}
.btn-txt {
vertical-align: middle;
}
Check out the DEMO on JSFiddle

Answer 3

You can fix by updating your margins for your img and span
.btn img
{
margin-left: 5px;
margin-top: 5px;
}
.btn span
{
display:inline-block;
width: 120px;
margin-top: 10px;
margin-left: 10px;
}

Answer 4

In addition to the answer above, you can add line-height to match the height of your container to force the button text into a centered position. Also, I used text-indent to push the text away from the image.
.btn span { line-height: 60px; text-indent: 10px;}
.btn img { margin: 5px; }
#btn_container { margin: 10px 0 0 0; }
Fiddle