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;

看起来你正在调整错误的元素，可能......

bottom：元素的底部与线上的最低元素对齐。
text-bottom：元素的底部与父元素的字体的底部对齐。

Answer 2

vertical-align: text-bottom;

将元素与父字体的底部对齐。

vertical-align: bottom;

将容器中的所有元素与容器的BOTTOM对齐。您可能希望使用 vertical-align：bottom 。

表格单元格未垂直对齐

2 个答案: