Как выровнять текст и изображение по вертикали в ячейке таблицы

Question

Итак, моя проблема видна на этом рисунке:

Как сделать так, чтобы в каждой ячейке текст имел одинаковую высоту? Последний <th> (text + img) почему-то тянет его вниз.

My 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>
    <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="piclink"/></i></td>
    </tr>
  </tbody>
</table>

Answer 1

Есть 2 способа исправить это:

1. Уменьшив высоту image (это то, что я сделал в ответе), это было 10% раньше и я сделал это как 5%. Из-за этого содержимое td сдвигалось вниз.

2. Если вы не хотите уменьшать высоту изображения, вам нужно увеличить высоту каждого row чтобы высота могла легко поместиться.

так что звоните вам, что выбрать.

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