html - 在 html 表格中对齐图像和标题和副标题

Question

我有一个表格，我将图像、标题、链接和描述放在 td 中。我想要这样的格式作为附件(文件图像)。我尝试了以下但对齐方式不正确。

我的 html 代码:

<section class="sub-section" id="test">
   <table>
      <tr>
         <td> <img src="../img/img.png" /> </td>
         <td class="tdalignmiddle">Header</td>
         <td class="tdalignmiddle">Link</td>
         <td class="tdalignbottom">Description</td>
      </tr>
   </table>
</section>
</body>
</html>

CSS:

.table{
}

.tdalignmiddle {

    vertical-align: middle;
    text-align: left;
    font-size:25px;
    font-family: sans-serif;
    font-weight:bold;
}

.tdalignbottom {

    vertical-align: bottom;
    text-align: left;
    font-size:12px;
    font-family: sans-serif;
    font-weight:bold;
}

Answer 1

你可以这样做:

CSS

table tr td{
    vertical-align: middle;
}

HTML

<section class="sub-section" id="test">
    <table>
        <tr>
            <td>
                <img src="../img/img.png" />
            </td>
            <td><h3>Header</h3><a href="#">Link</a><p>Description</p></td>
        </tr>
    </table>
</section>

然后您可以根据需要在 <h3> 上进行调整, <a>和 <p>通过设置一个类例如:<h3 class="title">Header</h3>

DEMO HERE