第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

無法在表格單元格內(nèi)居中對齊圖標(biāo)

無法在表格單元格內(nèi)居中對齊圖標(biāo)

函數(shù)式編程 2023-10-30 20:44:34
我遇到了在表格單元格內(nèi)居中對齊圖像的簡單問題。由于某種原因，CSS 保證金：自動(dòng)不適用于付款圖標(biāo)和提供的獎(jiǎng)金圖標(biāo)。您能告訴我 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貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超2個(gè)贊

這就是你所需要的？


您不必使用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>

您可以進(jìn)一步繼續(xù)并使其干凈，如下所示：


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


查看完整回答
反對 回復(fù) 2023-10-30
?
縹緲止盈

TA貢獻(xiàn)2041條經(jīng)驗(yàn) 獲得超4個(gè)贊

margin: auto令人困惑。它不僅僅意味著“將元素居中”。它對于不同的元素有不同的行為。根據(jù) CSS 標(biāo)準(zhǔn)，An<img>是or：replaced element

內(nèi)容超出 CSS 格式化模型范圍的元素，例如圖像、嵌入文檔或小程序

margin: autofor的行為replaced elements在 CSS 2 級標(biāo)準(zhǔn)中定義為：

“寬度”屬性不適用?！癿argin-left”或“margin-right”的“auto”計(jì)算值變?yōu)槭褂弥怠?”。

因此，設(shè)置margin: auto實(shí)際上沒有任何作用。

要獲得所需的結(jié)果，請將 包裝<img>在非替換元素（例如 a）中<div>，并設(shè)置其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>


查看完整回答
反對 回復(fù) 2023-10-30
  • 2 回答
  • 0 關(guān)注
  • 130 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號