0

I have following code to bring the image in the center of table cell which has more width than the image size. I have used text-center and align middle classes but nothing is working. Image is still on the left side of the cell. I am a newbie in bootstrap so do not know any other technique.

<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'>&nbsp;</td><td class='col-md-5'>&nbsp;</td><td class='text-center col-md-1'>&nbsp;</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>&nbsp;".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'>&nbsp;</td><td class='col-md-5'>&nbsp;</td><td class='text-center col-md-1'>&nbsp;</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>
Hkachhia
  • 4,463
  • 6
  • 41
  • 76
aishazafar
  • 1,024
  • 3
  • 15
  • 35

2 Answers2

1

maybe this can help you

td>img {
 margin: 0 auto;
}

https://jsfiddle.net/rtL27c4r/2/

saiful
  • 685
  • 6
  • 12
0

This is a pleasantly easy fix.You have given image responsive class to the image, Because .img-responsive from Bootstrap already sets display: block, you can use margin: 0 auto to center the image:

.product .img-responsive {
margin: 0 auto;

}

I hpe This Will fix your issue!