在html表格中定位单元格值答案

【问题标题】：positioning cell values in html table在html表格中定位单元格值
【发布时间】：2021-01-29 16:35:53
【问题描述】：

我有一个表格，其中 td 标记中的哪些值更倾向于上行。我希望其中的值居中。我已经尝试了下面的代码，但它没有用。有什么方法可以让价值集中在它既不过高也不过低的地方？

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

【问题讨论】：

在此处附加工作 sn-p。
这能回答你的问题吗？ Vertical Alignment of text in a table cell

标签： html css forms html-table

【解决方案1】：

我们不知道你的 css 怎么样，但这个例子似乎可以正常工作。

DEMO（可以看到“加拿大”放置正确）

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: center;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>

    <h2>HTML Table</h2>

    <table>
      <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr>
      <tr>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
      </tr>
      <tr>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
      </tr>
      <tr>
        <td>Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars <br> <br> <br> <br> Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri Yoshi Tannamuri Yoshi Tannamuri Yoshi Tannamuri Yoshi Tannamuri Yoshi Tannamuri</td>
        <td>Canada</td>
      </tr>
      <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
    </table>

  </body>
</html>

【讨论】：

【解决方案2】：

你可以使用行高

例如，如果您的 <td> 高度为 48 像素，则给您的 <td> 这个 css ：

line-height : 48px;

【讨论】：

【解决方案3】：

问题是“文本对齐”是水平对齐。您需要的是“vertical-align”属性。

https://www.w3schools.com/cssref/pr_pos_vertical-align.asp

【讨论】：

【解决方案4】：

您可以尝试将其添加到样式中，因为 text-align 会添加水平对齐方式

vertical-align: middle;

你可以在这里阅读更多 https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

【讨论】：