引导表单元格中的图像不会居中对齐

Question

我有以下代码将图像放在比图像大小更宽的表格单元格中心。我使用了文本中心和对齐中产阶级，但没有任何效果。图像仍然在单元格的左侧。我是引导新手，所以不知道任何其他技术。

<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>

Answer 1

这是一个很容易解决的问题。您为该图像指定了图像响应类，因为。img responsive from Bootstrap已设置显示：块，您可以使用边距：0自动将图像居中：

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

}

我希望这能解决你的问题！

Answer 2

也许这个能帮到你

td>img {
 margin: 0 auto;
}

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