表格单元格垂直对齐问题

Question

I'm not able to get my table cells contents to align correctly. I want the text and images in my cells to align to the bottom. The images also have a style:

Code:

CSS file:

#pagy3 table tr td {
    text-align: center;
    vertical-align: text-bottom;
    width: 25%;
    font-size: 14px;
    height: 100px;
}

HTML file:

 <div id="pagy3">

 <table align="center" border=1;>
     <col width="180px">
     <col width="180px">
     <col width="180px">
     <col width="180px">
     <tr>
        <td colspan=4>
            <h2>Title</h2>
        </td>
     </tr>
     <tr>
        <td>Image<br>text</td>
        <td>Image<br>text</td>
        <td>Image<br>text</td>
        <td>Image<br>text</td>
     </tr>
  </table>
  </div>

- Wanda

Answer 1

Try ...

vertical-align: bottom;

看起来你正在对齐错误的元素，可能是……

• bottom: 元素底部与行中最低的元素对齐。
• text-bottom: 元素底部与父元素字体的底部对齐。

- rfornal

---

谢谢您的解释。顺便问一下，我的表格中的文本是否可以底部对齐，而图像则在中间？我尝试了：#page3 table tr td.image {vertical-align: middle;}，但没有任何效果。我完全是css/html的新手，之前使用的是frontpage超过10年。 - Wanda

如果你建立了一个jsFiddle或类似的东西，有人会给你答案。这种类型的对齐可能会有点棘手。 - rfornal

你可以考虑将图像和文本分成两行...这样对齐就能正确分开了。 - rfornal

Answer 2

vertical-align: text-bottom;

这将使元素与父元素的底部对齐，基于父元素文本的底部。

vertical-align: bottom;

将容器中的所有元素与容器底部对齐。你可能更想使用 vertical-align:bottom。

- Cliff Ribaudo

---

谢谢Cliff。那个方法有效。我没有给你投反对票，即使我想投也不行。因为我没有足够的积分来投赞成票。 - Wanda

“社区机器人”是可怕的人类“机器人”，如果它们没有为答案增加一些特定价值使其与已经回答的问题不同，就不喜欢相同的答案。 - Roko C. Buljan

如果他们仔细看的话，他们可能会注意到我是在另一个回答发布时写我的回答的。而且，我的回答最初只是一个一行的答案，没有解释为什么一个有效而另一个无效。 - Cliff Ribaudo

@CliffRibaudo 哈哈哈，是的，他们可能仔细看了:D - Roko C. Buljan