我有一个表格,我将图像、标题、链接和描述放在 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;
}
最佳答案
你可以这样做:
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>
关于html - 在 html 表格中对齐图像和标题和副标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33342003/