无法在表格单元格内居中对齐图标

Question

我遇到了在表格单元格内居中对齐图像的简单问题。由于某种原因，CSS 保证金：自动不适用于付款图标和提供的奖金图标。您能告诉我 margin: auto 有什么问题吗？谢谢。

        <table class="payment-table">

            <tr class="payment-table-row payment-table-header">

                <th class="payment-table-header-item">Payment System</th>

                <th class="payment-table-header-item">Limits</th>

                <th class="payment-table-header-item">Commission (%)</th>

                <th class="payment-table-header-item">Processing Time</th>

                <th class="payment-table-header-item">Bonus Offered</th>

            </tr>   

            <tr class="payment-table-row">

                <td><img src="ico/neteller.png" class="payment-icon"></td>

                <td class="deposit-limits table-data">£10 - £ 2000</td>

                <td class="deposit-commission table-data">3 % +  £ 1.55</td>

                <td class="deposit-processing table-data">Up to 3 Bank Days</td>

                <td><img src="ico/yes.png" class="bonus-offered-icon"></td>

            </tr>

            <tr class="payment-table-row">

                <td><img src="ico/neteller.png" class="payment-icon"></td>

                <td class="deposit-limits table-data">£10 - £ 2000</td>

                <td class="deposit-commission table-data">3 % + £ 1.55</td>

                <td class="deposit-processing table-data">Up to 3 Bank Days</td>

                <td><img src="ico/yes.png" class="bonus-offered-icon"></td>

            </tr>

        </table>

这是 CSS：

.payment-table{

    width: 60%;

}

.payment-icon{

    margin: auto;

    width: 40px;

}

.bonus-offered-icon{

    width: 20px;

    margin:auto;

}

.table-data{

    max-width: 30px;

    text-align: center;

}

Answer 1

这就是你所需要的？您不必使用margin:auto;中心对齐。你只需要text-align:center;在 中使用td。.payment-table {&nbsp; width: 80%;&nbsp; border: 1px solid black;}.payment-table-header-item {&nbsp; border: 1px solid red;}.payment-table-row td {&nbsp; width:15%; /* customize the width of the td if you need */&nbsp; border: 1px solid teal;&nbsp; text-align: center; /* this is what you need to align center */}.payment-icon {&nbsp; margin: auto;&nbsp; width: 40px;}.bonus-offered-icon {&nbsp; width: 20px;&nbsp; margin: auto;}.table-data {&nbsp; max-width: 30px;&nbsp; text-align: center;}<table class="payment-table">&nbsp; <tr class="payment-table-row payment-table-header">&nbsp; &nbsp; <th class="payment-table-header-item">Payment System</th>&nbsp; &nbsp; <th class="payment-table-header-item">Limits</th>&nbsp; &nbsp; <th class="payment-table-header-item">Commission (%)</th>&nbsp; &nbsp; <th class="payment-table-header-item">Processing Time</th>&nbsp; &nbsp; <th class="payment-table-header-item">Bonus Offered</th>&nbsp; </tr>&nbsp; <tr class="payment-table-row">&nbsp; &nbsp; <td><img src="ico/neteller.png" class="payment-icon"></td>&nbsp; &nbsp; <td class="deposit-limits table-data">£10 - £ 2000</td>&nbsp; &nbsp; <td class="deposit-commission table-data">3 % + £ 1.55</td>&nbsp; &nbsp; <td class="deposit-processing table-data">Up to 3 Bank Days</td>&nbsp; &nbsp; <td><img src="ico/yes.png" class="bonus-offered-icon"></td>&nbsp; </tr>&nbsp; <tr class="payment-table-row">&nbsp; &nbsp; <td><img src="ico/neteller.png" class="payment-icon"></td>&nbsp; &nbsp; <td class="deposit-limits table-data">£10 - £ 2000</td>&nbsp; &nbsp; <td class="deposit-commission table-data">3 % + £ 1.55</td>&nbsp; &nbsp; <td class="deposit-processing table-data">Up to 3 Bank Days</td>&nbsp; &nbsp; <td><img src="ico/yes.png" class="bonus-offered-icon"></td>&nbsp; </tr></table>您可以进一步继续并使其干净，如下所示：.payment-table {&nbsp; width: 60%; /* customize the width of the whole table */&nbsp; border: 1px solid black;}.payment-table-header-item {&nbsp; border: 1px solid red;}.payment-table-row td {&nbsp; width:15%; /* customize the width of the td if you need */&nbsp; border: 1px solid teal;&nbsp; text-align: center; /* this is what you need to align center */}<table class="payment-table">&nbsp; <tr class="payment-table-row payment-table-header">&nbsp; &nbsp; <th class="payment-table-header-item">Payment System</th>&nbsp; &nbsp; <th class="payment-table-header-item">Limits</th>&nbsp; &nbsp; <th class="payment-table-header-item">Commission (%)</th>&nbsp; &nbsp; <th class="payment-table-header-item">Processing Time</th>&nbsp; &nbsp; <th class="payment-table-header-item">Bonus Offered</th>&nbsp; </tr>&nbsp; <tr class="payment-table-row">&nbsp; &nbsp; <td><img src="ico/neteller.png" class="payment-icon"></td>&nbsp; &nbsp; <td class="deposit-limits table-data">£10 - £ 2000</td>&nbsp; &nbsp; <td class="deposit-commission table-data">3 % + £ 1.55</td>&nbsp; &nbsp; <td class="deposit-processing table-data">Up to 3 Bank Days</td>&nbsp; &nbsp; <td><img src="ico/yes.png" class="bonus-offered-icon"></td>&nbsp; </tr>&nbsp; <tr class="payment-table-row">&nbsp; &nbsp; <td><img src="ico/neteller.png" class="payment-icon"></td>&nbsp; &nbsp; <td class="deposit-limits table-data">£10 - £ 2000</td>&nbsp; &nbsp; <td class="deposit-commission table-data">3 % + £ 1.55</td>&nbsp; &nbsp; <td class="deposit-processing table-data">Up to 3 Bank Days</td>&nbsp; &nbsp; <td><img src="ico/yes.png" class="bonus-offered-icon"></td>&nbsp; </tr></table>

Answer 2

margin: auto令人困惑。它不仅仅意味着“将元素居中”。它对于不同的元素有不同的行为。根据 CSS 标准，An<img>是or：replaced element内容超出 CSS 格式化模型范围的元素，例如图像、嵌入文档或小程序margin: autofor的行为replaced elements在 CSS 2 级标准中定义为：“宽度”属性不适用。“margin-left”或“margin-right”的“auto”计算值变为使用值“0”。因此，设置margin: auto实际上没有任何作用。要获得所需的结果，请将 包装<img>在非替换元素（例如 a）中<div>，并设置其margin和width。body {  width: 100%;}.payment-table{    width: 60%;}.payment-icon{    margin: 0 auto;    width: 40px;}.bonus-offered-icon{    width: 20px;    margin: 0 auto;}.table-data{    max-width: 30px;    text-align: center;}<body><table class="payment-table">            <tr class="payment-table-row payment-table-header">                <th class="payment-table-header-item">Payment System</th>                <th class="payment-table-header-item">Limits</th>                <th class="payment-table-header-item">Commission (%)</th>                <th class="payment-table-header-item">Processing Time</th>                <th class="payment-table-header-item">Bonus Offered</th>            </tr>               <tr class="payment-table-row">                <td><div class="payment-icon"><img src="ico/neteller.png"></div></td>                <td class="deposit-limits table-data">£10 - £ 2000</td>                <td class="deposit-commission table-data">3 % +  £ 1.55</td>                <td class="deposit-processing table-data">Up to 3 Bank Days</td>                <td><div class="bonus-offered-icon"><img src="ico/yes.png"></div></td>            </tr>            <tr class="payment-table-row">                <td><div class="payment-icon"><img src="ico/neteller.png"></div></td>                <td class="deposit-limits table-data">£10 - £ 2000</td>                <td class="deposit-commission table-data">3 % + £ 1.55</td>                <td class="deposit-processing table-data">Up to 3 Bank Days</td>                <td><div class="bonus-offered-icon"><img src="ico/yes.png"></div></td>            </tr>        </table></body>