html - 表格单元格未垂直对齐

Question

我无法让我的表格单元格内容正确对齐。我希望单元格中的文本和图像与底部对齐。这些图像也有一种风格:

代码:

CSS 文件:

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

HTML 文件:

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

Answer 1

尝试...

vertical-align: bottom;

看起来您正在对齐错误的元素，可能...

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