CSS表格单元格垂直对齐文本顶部。

Question

我在表格中使用了 vertical-align: middle 来设置全局的单元格垂直居中。

现在我需要将仅一个的垂直排列方式更改为 vertical-align: text-top。

问题是，我尝试过的所有可以实现 vertical-align:text-top 的方法都只显示为顶部对齐.

(图中的 "xxxx" 不与 "yyyy" 在同一行)

唯一可行的方法是更改所有 td 的全局样式（但我不想这样做，我只需要更改仅一个 td）。

参见以下图片：

设置为本地样式将显示为顶部对齐 local style http://aukro.svecpetr.com/style.png

设置为类将显示为顶部对齐 local style http://aukro.svecpetr.com/class.png

更改全局的 td 具有正确的 文本顶部对齐 效果。 local style http://aukro.svecpetr.com/global-style.png

示例： https://zbozimat.cz/test.php

有人可以帮我吗？

- user5332

---

你能把你的代码放在**这里**吗？ - Mee

我在这里放了一个例子 https://zbozimat.cz/test.php - user5332

它们是对齐的。你第一个单元格中的文本与第二个单元格中最高的元素（即按钮）对齐。你不能将文本与如此居中对齐的其他元素顶部对齐。 - cimmanon

@user5332 您的意思是要将 xxxx 设置为 text-top，而 yyyy 留在底部吗？在这种情况下，为什么不创建两个 CSS 规则？第一个规则用于顶部，第二个用于底部。分别添加 td class="top-align" 和 td class="bottom-align"。 Class 名称并不重要（就像您自己的语言一样），但请确保是 Utf 字符。 - Mee

Answer 1

为div添加此内容:

display: inline-block;
vertical-align: top;

这是输入的内容：

display: inline-block;
vertical-align: top;

- Hafid Denguir

---

简短明了，这是一个很好的答案。我不需要显示标签。 - clockw0rk

Answer 2

你也可以在 td 上设置 attr 样式

<td style="vertical-align: top;">

- Paket2001