After replacing cell text using JavaScript, text is no longer centered

I have a table that contains a cell like this:

<td class="catop"><center>2406.31</td>

Select allOpen in new window

The "2406.31" is displayed centered in the cell.

I have the following JS which changes that value when a drop down option in the same row is selected:

$(".rank").change(function() {
    var rankop = this.value; // get Rank value
    var $catrow = $(this).closest("tr");    // Find the row
    var $catop1 = $catrow.find(".catop").text(); // Find cat Op
	var $catop = (rankop * $catop1); // Multiply ranking x op for new op 
	$catop =$catop.toFixed(2);    // format to 2 decimal points
	$catrow.find(".catop").text($catop);  // change text of catop cell to new op

});
	

Select allOpen in new window

The script works fine but when the cell text is replaced with the new number is is aligned left instead of centered. Is there a way for me to keep the cell text centered after being replaced?