在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>上根据需要进行调整，方法是设置ex：<h3 class="title">Header</h3>

<强> DEMO HERE