## aligning text to center of background image

Well, I don't know why I'm having issues with this, but I can't figure out why I can't get it to work.

I want to align the 50 g and Carbs to the center of the image. Am I going about this the wrong way? The "margin-left:95px;" shifts the text over, but the "margin-top:75px;" has no effect. Either way I'd like to align it to the center without using pixels. I want to do something like text-align:center; but I can't get that to work. I want it to do something like that since the text here will be changing (i.e. 50 ).

<div style="float:left;">
<p style="font-size:18px;"> Carbohydrates </p>
<p style="background-image:url(../../includes/images/MacronutrientsBackgroundCarbs.png);
background-repeat:no-repeat; background-position:center; color:#776f63; width:242px; height:242px; margin-left:-15px; margin-top:-15px; font-size:30px;"> <span style="margin-left:95px; margin-top:75px;">50 g </span> <br /><span> Carbs</span> </p>

</div>