时间戳

首页 > 解决方案 > 如何在表格单元格中垂直对齐文本和图像

php - 如何在表格单元格中垂直对齐文本和图像

问题描述

所以我的问题可以在这张图片中看到： 文本未对齐

如何使每个单元格的文本高度相同？最后一个<th>(text+img) 出于某种原因将其拖下。

我的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>

标签： phphtmlcss

解决方案

有两种方法可以解决此问题：

  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>

推荐阅读