CSS caption-side 属性
CSS caption-side 属性
CSS caption-side 属性规定图片的标题在图片的哪一侧显示。
语法
caption-side: top | bottom | initial | inherit;
属性值
- top：标题位于图像的顶部。
- bottom：标题位于图像的底部。
- initial：设置此属性为其默认值。
- inherit：从父元素继承 caption-side 属性。
注意事项
- 此属性仅适用于 display 属性具有 table-caption 值的元素。
- 如果未设置宽度和高度，则图像的标题将不显示。
实例
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #ddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<caption style="caption-side:bottom">这是一个标题</caption>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
<tr>
<td>行1, 列1</td>
<td>行1, 列2</td>
<td>行1, 列3</td>
</tr>
<tr>
<td>行2, 列1</td>
<td>行2, 列2</td>
<td>行2, 列3</td>
</tr>
</table>
</body>
</html>
结果
效果如下所示：
总结
caption-side 属性可用于改变图像标题的侧边。它仅适用于表格元素。当添加此属性时，可以通过位置属性 top 或 bottom 来设置标题的侧边位置。