html - 在图像的边框上放置标题

Question

好吧，我想在我正在开发的图像库的图像边界上放置一个标题。基本上，我的图像使用边框和边距在它们周围创建效果，使它们看起来像宝丽来照片。我想在边框顶部放置一个标题。这是我的CSS。

.column img {
    position:relative; 
    display:inline-block; 
    width:130px; 
    height:100px;
    margin: auto; 
    padding:10px; 
    background:#fff; 
    box-shadow:0 0 5px rgba(0,0,0,.35);
    -webkit-box-shadow: 1px 3px 3px rgba(0,0,0,.8);
    -moz-box-shadow: 1px 3px 3px rgba(0,0,0,.8);
    box-shadow: 1px 3px  3px rgba(0,0,0,.8);
    border: 1px solid #fff;
    padding: 5px 5px 35px 5px;
}

.column div {
    max-width: 100%;
    max-height: 100%;
    float: left;
    margin: 0 15px 5px 0;
    margin-left: 5px;
    border-radius: 2px;
    overflow:hidden;
}

边框工作正常，看起来不错，但标题不会显示在边框顶部，任何帮助将不胜感激。

Answer 1

尝试使用 <fieldset> 和 <legend> 标签在图像周围绘制一个带标题的框。 <fieldset>
<legend>Caption Here</legend>
<!-- Image here -->
</fieldset>