2 column div layout, right column fixed width, always centred - html

Question

I'm trying to place some content within a table cell but it needs to meet the following specifications.
The content I'm adding is:
x *
Where x is any number (i.e a variable length) and * is a picture of a star, which will be a fixed length of let's say ypx. I want this content to appear centred in the table cell, with x always being z pixels to the left of *. For example's sake, let's say the * is 16px wide, and z is 2px (i.e a 2px spacing between x and the star picture.
I've tried a simple 2 column layout where I float the x to the left, float the * to the right, which works but does not center the two columns, instead x sticks to the left of the table cell, and * sticks to the right of it.
Any help appreciated :) . I can use JS if need be, but I'd prefer a HTML/CSS solution of course.

Answer 1

here just in case the jsBin expires i will put the code in an answer. once again excuse my sloppy code, im literally about to fall asleep
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
td { width:300px; height:300px;border:1px solid;position:relative;}
td img {width:100%;max-width:16px;padding-left:2px}
.num { float:left}
.wrapper { margin:0 auto;}
</style>
<script>
$(function(){
width = $('.num').width() + 18;
$('.wrapper').css('width',width.toString() + 'px');
});
</script>
<table>
<tr>
<td>
<div class="wrapper">
<div class='num'>1234</div>
<img src="http://www.wpclipart.com/signs_symbol/icons_oversized/male_user_icon.png">
</div>
</td>
</tr>
</table>
http://jsbin.com/gesajeyiya/1/watch

Answer 2

If you know you will only be displaying numbers of 0 to 9999 then you do not need a script
http://jsbin.com/vagulejaqi/1/watch?html,css,output
<table id="your-table">
<tbody>
<tr>
<td>
<div class='cell-inner-wrapper'>
<div class='my-numbers'>
9999
</div>
<img src="https://www.novell.com/documentation/groupwisemobility2/gwmob2_guide_admin/graphics/icon_user_n.png">
</div>
</td>
<td>
<div class='cell-inner-wrapper'>
<div class='my-numbers'>
1
</div>
<img src="https://www.novell.com/documentation/groupwisemobility2/gwmob2_guide_admin/graphics/icon_user_n.png">
</div>
</td>
</tr>
</tbody>
</table>
#your-table {
font-family:monospace;
font-size:12px;
width:100%;
border: 1px solid #000;
}
#your-table td {
border: 1px solid #000;
width:50%;
}
.cell-inner-wrapper {
//12px * 4 + 16px + 2px
max-width: 66px;
text-align:center;
}
#your-table td img{
padding-left: 2px;
display:inline;
vertical-align:middle;
}
.my-numbers {
max-width:48px;
display:inline;
line-height:4.5em;
}