I am struggling to center an image in a table cell that is wider than the image itself. I have tried using the text-center and align-middle classes in Bootstrap, but the image remains on the left side of the cell. Since I am new to Bootstrap, I am not familiar with any other techniques to achieve this.
<div class="table-responsive">
<form name="frmPayment" method="post" id="frmPayment" action="viewcart.php">
<?php
$str = "<table class='table table-striped table-hover'>";
$str .= "<thead><tr><th class='text-center col-md-1'>Sr#</th><th class='col-md-5'>Product Name</th><th class='text-center col-md-1'>Quantity</th><th class='col-md-1 text-center'>Price</th><th class='col-md-1 text-center'>Sale Price</th><th class='col-md-1 text-center'>Sub Total</th><th class='col-md-1 text-center'>Photo</th><th class='text-center col-md-1'>Action</th></tr></thead>";
$products = $_SESSION["orders"];
// pr($products);
//pr($products_info);
$p = count($products);
$str .= "<tbody>";
$total = 0;
$i = 0;
/*pr($products);
exit;*/
foreach($products as $key=>$val)
{
//echo $key;
$i = $i+1;
$qty = $products[$key]["qtydtl"];
$price = $products_info[$products[$key]["dt_prooduct_id"]]->price;
$sale_price = $products_info[$products[$key]["dt_prooduct_id"]]->sale_price;
$sale = $products_info[$products[$key]["dt_prooduct_id"]]->sale;
$sub_total = (($sale==1 && $sale_price?$sale_price*$qty:$price*$qty));
$total = $total+$sub_total;
$str .= "<tr><td align='center' class='col-md-1'>".($i)."</td><td class='col-md-5'>".$products_info[$products[$key]["dt_prooduct_id"]]->name."</td><td class='text-center col-md-1'><input class='bxqty' type='text' name='quantity[]' value='".$qty."' size='5' /><input type='hidden' name='arr_keys[]' value='".$products[$key]["dt_prooduct_id"]."' size='5' /></td><td class='col-md-1 text-center'>".number_format($price)."</td><td class='col-md-1 text-center'>".number_format($sale_price)."</td><td class='col-md-1 text-center'>".number_format($sub_total)."</td><td class='col-md-1 align-middle'><img class='img-rounded img-responsive text-center' width='50' src='".$site_path."upload_prdimgs/".$products_info[$products[$key]["dt_prooduct_id"]]->image_name."' /></td><td class='text-center col-md-1'><a class='btnRemove btn btn-primary' href='#' data='".$key."'>Remove</a> </td></tr>";
}
$str .= "<tr><td class='col-md-1'> </td><td class='col-md-5'> </td><td class='text-center col-md-1'> </td><td class='col-md-1 text-center'></td><td class='col-md-1'></td><td class='col-md-1'></td><td class='col-md-1'></td><td class='text-center col-md-1'><b>Total:</b> ".number_format($total)."</td></tr>";
//$str .= "<tr><td class='col-md-12 text-right'><b>Total:</b></td></tr>";
$str .= "<input type='hidden' name='action' id='action' value='' />";
$str .= "<tr><td class='col-md-1'> </td><td class='col-md-5'> </td><td class='text-center col-md-1'> </td><td class='col-md-1 text-center'></td><td class='col-md-1'></td><td class='col-md-1'></td><td class='text-center col-md-1'><input type='button' name='btnUpdate' id='btnUpdate' class='btn btn-success' value='Update Order' onclick='updateOrder();' /></td><td class='text-center col-md-1'><input type='button' name='btnOrder' id='btnOrder' class='btn btn-primary' value='Confirm Order' onClick='confirmOrder();' /></td></tr>";
$str .= "</tbody></table>";
echo $str;
?>
</form>
</div>