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

Posted 2023-03-05

【中文标题】引导表单元格中的图像不会居中对齐

【英文标题】：Image in bootstrap table cell is not going to be align in center

【发布时间】：2018-04-20 17:41:00

【问题描述】：

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

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

【问题讨论】：

请提供代码。

我的代码已经在我的问题中了，请看一下。

这段代码没有用。

嗨@ankita 我已经添加了完整的表格代码。请看一下，我想知道解决这个问题的专业方法。提前致谢。

请提供工作代码或任何其他链接以查看输出。因为在这段代码中没有任何输出。

【参考方案1】：

也许这对你有帮助

td>img 
 margin: 0 auto;

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

【参考方案2】：

这是一个非常简单的解决方法。您已经为图像提供了图像响应类，因为 Bootstrap 中的 .img-responsive 已经设置了 display: 块，您可以使用 margin: 0 auto 使图像居中：

.product .img-responsive 
margin: 0 auto;

我希望这会解决您的问题！

【讨论】：

您的代码是正确的，但是如果我在 .img-responsive 类中进行此更改，它将把所有图像都放在列的中心。感谢您的帮助。

给你的图片一个类或id，这样你就可以为这个img标签实现这个功能:)

是的，我知道，但旧版本的答案不正确。将图像置于中心的专业方法是在 img 标签中添加 center-block 类:)

那么好:) @Shahrzad