我遇到了在表格單元格內居中對齊圖像的簡單問題。由于某種原因，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;}
2 回答
慕婉清6462132
TA貢獻1804條經驗 獲得超2個贊
這就是你所需要的？
您不必使用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>
縹緲止盈
TA貢獻2041條經驗 獲得超4個贊
margin: auto令人困惑。它不僅僅意味著“將元素居中”。它對于不同的元素有不同的行為。根據 CSS 標準，An<img>是or：replaced element
內容超出 CSS 格式化模型范圍的元素，例如圖像、嵌入文檔或小程序
margin: autofor的行為replaced elements在 CSS 2 級標準中定義為：
“寬度”屬性不適用?！癿argin-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>
- 2 回答
- 0 關注
- 143 瀏覽
添加回答
舉報
0/150
提交
取消