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

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

如何垂直對(duì)齊表格單元格中的文本和圖像

如何垂直對(duì)齊表格單元格中的文本和圖像

PHP
BIG陽(yáng) 2023-04-21 10:46:35
所以我的問(wèn)題可以在這張圖片中看到: 如何使每個(gè)單元格的文本高度相同?最后一個(gè)<th>(text+img) 不知為何把它拖了下來(lái)。我的CSS:.table {  width: 100%;  padding: 0;  margin: 15px 0 0;  border-collapse: collapse}.table th {  text-align: left;  color: #fff;  background: 0 0;  text-transform: uppercase;  font-size: .9em;  line-height: 1em;  padding: .5em;}.table th.gold {  color: #ffdd45}.table td {  padding: .7em .5em .6em;  font-size: 1.1em;  line-height: 1.2em;  background: #222;  border: 2px solid rgba(0, 0, 0, 0);  vertical-align: middle;}<table class="table rate" style="margin-top: 0;">  <thead>    <tr>      <th>#</th>      <th>User</th>      <th>Number 1</th>      <th class="gold">Number 2</th>      <th>text+img</th>    </tr>  </thead>  <tbody id="players-table1">    <tr>      <td style="text-align: center;">1</td>      <td>        <a href="/user/9842394892389" class="username">          <img src="piclink" alt="Аvatar"><span>user0</span></a>      </td>      <td>4</td>      <td class="bold gold">500</td>      <td style="width:10%"><i>35x<img src="http://placekitten.com/301/301" style="width:55%;height:10%"/></i></td>    </tr>    <tr>      <td style="text-align: center;">2</td>      <td>        <a href="/user/9842394892389" class="username">          <img src="piclink" alt="Аvatar"><span>user</span></a>      </td>      <td>4</td>      <td class="bold gold">400</td>      <td style="width:10%"><i>35x<img src="piclink" style="width:55%;height:10%"/></i></td>    </tr>    <tr>      <td style="text-align: center;">3</td>      <td>        <a href="/user/9842394892389" class="username">          <img src="piclink" alt="Аvatar"><span>user2</span></a>      </td>      <td>3</td>      <td class="bold gold">300</td>      <td style="width:10%"><i>35x<img src="piclink" style="width:55%;height:10%"/></i></td>    </tr>
查看完整描述

1 回答

?
江戶川亂折騰

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

有兩種方法可以解決這個(gè)問(wèn)題:

  1. 降低高度image(這是我在回答中所做的),這是10%以前的,我把它做成5%. 由于這個(gè)原因,內(nèi)容td被壓低了。

  2. 如果您不想降低圖像的高度,則必須增加每個(gè)圖像的高度,row以便高度可以輕松適應(yīng)。

所以選擇是你的。

.table {

  width: 100%;

  padding: 0;

  margin: 15px 0 0;

  border-collapse: collapse

}


.table th {

  text-align: left;

  color: #fff;

  background: 0 0;

  text-transform: uppercase;

  font-size: .9em;

  line-height: 1em;

  padding: .5em;

}


.table th.gold {

  color: #ffdd45

}


.table td {

  padding: .7em .5em .6em;

  font-size: 1.1em;

  line-height: 1.2em;

  background: #222;

  border: 2px solid rgba(0, 0, 0, 0);

  vertical-align: middle;

  border: 1px solid red;

}

<table class="table rate" style="margin-top: 0;">

  <thead>

    <tr>

      <th>#</th>

      <th>User</th>

      <th>Number 1</th>

      <th class="gold">Number 2</th>

      <th>text+img</th>

    </tr>

  </thead>

  <tbody id="players-table1">

    <tr>

      <td style="text-align: center;">1</td>

      <td>

        <a href="/user/9842394892389" class="username">

          <img src="piclink" alt="Аvatar"><span>user0</span></a>

      </td>

      <td>4</td>

      <td class="bold gold">500</td>

      <td style="width:10%"><i>35x<img src="http://placekitten.com/301/301" style="width:55%;height:5%"/></i></td>

    </tr>

    <tr>

      <td style="text-align: center;">2</td>

      <td>

        <a href="/user/9842394892389" class="username">

          <img src="piclink" alt="Аvatar"><span>user</span></a>

      </td>

      <td>4</td>

      <td class="bold gold">400</td>

      <td style="width:10%"><i>35x<img src="http://placekitten.com/301/301" style="width:55%;height:5%"/></i></td>

    </tr>

    <tr>

      <td style="text-align: center;">3</td>

      <td>

        <a href="/user/9842394892389" class="username">

          <img src="piclink" alt="Аvatar"><span>user2</span></a>

      </td>

      <td>3</td>

      <td class="bold gold">300</td>

      <td style="width:10%"><i>35x<img src="http://placekitten.com/301/301" style="width:55%;height:5%"/></i></td>

    </tr>

    <tr>

      <td style="text-align: center;">4</td>

      <td>

        <a href="/user/9842394892389" class="username">

          <img src="piclink" alt="Аvatar"><span>user2</span></a>

      </td>

      <td>3</td>

      <td class="bold gold">300</td>

      <td style="width:10%"><i>35x<img src="http://placekitten.com/301/301" style="width:55%;height:5%"/></i></td>

    </tr>

  </tbody>

</table>


查看完整回答
反對(duì) 回復(fù) 2023-04-21
  • 1 回答
  • 0 關(guān)注
  • 128 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號(hào)

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