如何在表格中居中条形码图像？答案

【问题标题】：how to center barcode image in the table?如何在表格中居中条形码图像？
【发布时间】：2020-02-11 11:35:52
【问题描述】：

我正在尝试在 odoo 中设计条形码标签，如果它是短条形码，它会打印得很好，否则条形码会越过表格边框，我也无法用阅读器读取它，有时它会打印在 2 个标签中，如果名称在第一个单元格很长所以我需要为表格设置固定大小这是标签的 2 个屏幕截图

这里是代码

 <div class="col-xs-4" style="padding:0;" align="center">
                    <table class="table table-bordered mb-0" width="50mm" style="padding:0"  >
                      <tr  style="font-size: 50%;;padding:0" align="center" valign="center">
 <td style="font-size: 110%;;padding:0">
                            <strong t-field="product.name"/>
</td>
                      </tr>
                      <tr style="margin:0 auto;padding:0 auto;" align="center">
                        <td style="padding:1" align="center" colspan = "2">
                            <img t-if="product.barcode" t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('Code128', product.barcode,600 ,150)" style="width:120%;height:30%;margin:0 auto;padding:0 auto;"/>
                            <br style="text-align: center;padding:1;">     
                                <span  style="font-size: 6px;text-align: center;" t-field="product.barcode"/>
                            </br>
                        </td>
                      </tr>
                      <tr style="text-align: center;">
                        <td style="font-size: 50%;padding:0">www.autopartsegypt.com</td>
                      </tr>
                    </table>
             </div>

【问题讨论】：

能否请您创建一个工作演示，以及为什么在img 上使用width:120%，它必须是100%
可以增加table td宽度
@Awais 如果 100% 阅读器无法读取条形码
@MohamedFouad 但它违反规则，宽度100% 表示它的父宽度，无论它在那里提到什么，一定有一些div 有margin 或静态width 导致这个问题，但没有完整的工作代码，我们只是给你提示:(
@Awais 这是整个代码，如果宽度为 100%，它在中心，但我无法被读者阅读

标签： html css xml frontend odoo

【解决方案1】：

尝试在 img 或 table 标签上使用margin-right:1%; 并根据需要增加百分比。

【讨论】：

【解决方案2】：

试试这个 sn-p，我使用 object fit 和 width，如果有请告诉我打印良好，您可以将其width 设置为100% 或px 什么随心所欲

img{
max-width: 100%;
}
.img-wrap img{
width: 200px;
object-fit: contain;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<table class="table table-bordered mb-0" style="text-align: center;" >
<tr >
<td >
<strong t-field="product.name">product.name</strong>
</td>
</tr>
<tr style="margin:0 auto;padding:0 auto;" align="center">
<td style="padding:1" align="center" colspan = "2"><div class="img-wrap">
<img src="https://i.stack.imgur.com/mqCU0.gif" style=""/></div>
<br style="text-align: center;padding:1;">
<span style="" t-field="product.barcode">product.barcode</span>

</td>
</tr>
<tr style="text-align: center;">
<td style="">www.autopartsegypt.com</td>
</tr>
</table>

【讨论】：