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

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 {

  width: 80%;

  border: 1px solid black;

}

.payment-table-header-item {

  border: 1px solid red;

}

.payment-table-row td {

  width:15%; /* customize the width of the td if you need */

  border: 1px solid teal;

  text-align: center; /* this is what you need to align center */

}

.payment-icon {

  margin: auto;

  width: 40px;

}

.bonus-offered-icon {

  width: 20px;

  margin: auto;

}

.table-data {

  max-width: 30px;

  text-align: center;

}

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

您可以进一步继续并使其干净，如下所示：

.payment-table {

  width: 60%; /* customize the width of the whole table */

  border: 1px solid black;

}

.payment-table-header-item {

  border: 1px solid red;

}

.payment-table-row td {

  width:15%; /* customize the width of the td if you need */

  border: 1px solid teal;

  text-align: center; /* this is what you need to align center */

}

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

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>