How do I vertically align text & image in a table cell

Question

So my problem can be seen in this picture:

How do I make every cell have the text at the same height? The last <th> (text+img) drags it down for some reason.

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

There are 2 ways to fix this:

1. Decreasing the height of the image (which is what I did in answer), this was 10% before and I made it as 5% . The td content was pushing down due to that.

2. If you don't want to decrease the height of the image then you have to increase the height of the each row so that the height can easily fit-in.

so call is yours what to choose.

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