Why is my image not aligning in the center? - html

Question

I am not able to figure out why my image in between the label is not aligning to the center , even though I have declared the css inline , but the priority is not working.
I have declared text-align as left in the <style> tag , but I want only this particular tag to align center and not others.
here is my html ,
<td class="ospy_td" style="background-color:#ddd;border-bottom-left-radius:5px;style=text-align:center">
<label class="ospy_lab" style="text-align:center">
<img id="bt" src="img/bt.png" width="30" height="29" />
</label>
</td>
Here is my CSS, which is deined within a tag in the same html page,
.ospy_td, label {
text-align: left;
vertical-align: middle;
cursor: default;
font-weight:normal;
color:#0066c0;
};

Answer 1

I see a couple of errors here in CSS and usage of html elements.
But one them that creates the issue, is the style= inside style attribute:
<td class="ospy_td" style="background-color:#ddd;border-bottom-left-radius:5px;
style=
text-align:center"
>
Delete this "style=" and thing will work.
My suggestion code change (jsFiddle):
HTML
<table>
<tr>
<td class="ospy_td">
<i class="ospy_lab" />
</td>
<tr>
</table>
CSS
table {
width: 100%;
}
td {
background: #66f;
text-align: center;
}
.ospy_td {
background-color: #ddd;
border-bottom-left-radius: 5px;
cursor: default;
vertical-align: middle;
}
i.ospy_lab {
background-image: (img/bt.png);
background-position: center center;
background-repeat: no-repeat;
font-weight: normal;
color: #0066c0;
display: inline-block;
height: 29px;
width: 30px;
}

Answer 2

.ospy_td, label {
text-align: left; // this is your problem, change to center
}
you forgot a semicolon here
style="text-align:center"
change to
style="text-align:center;"