css - 将文本放在填充空间内

Question

我正在创建具有类似宝丽来效果的图像，使用图像周围的填充并将背景颜色设置为白色

 img.team {
background: none repeat scroll 0 0 white;
box-shadow: 0 9px 25px -5px #000000;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
padding: 12px 12px 50px;

我想做的是在图像下方和填充之间的空间内写一个标题，就像我用毡笔在上面写字一样。我使用 bootstraps 缩略图作为我的图像。

我在h5上试过负边距

 h5 {
color: #333333;
font-size: 1.1em;
margin-top: -35px;
text-align: center;

HTML 是

      <div class="container">
      <div class="row">
      <div class="span4">
        <div class="thumbnail">
         <img class="team"  src="http://placehold.it/160x120"  title="Swimming" alt="Swimming" ></a>

            <h5>Swimming</h5>



   </div><!--End of thumbnail-->
</div><!--End of span4-->

然而，当我在下面放置另一排宝丽来照片时，由于这个边距，它们会与顶部的相重叠。

有没有人做过这样的事情？任何帮助表示赞赏

Answer 1

而不是样式 <img> , 款式 div.thumbnail相反:

<div class="thumbnail">
    <img class="team"  src="http://placehold.it/160x120"  title="Swimming" alt="Swimming" ></a>

    <h5>Swimming</h5>
</div>

CSS:

div.thumbnail {
    background: none repeat scroll 0 0 white;
    box-shadow: 0 9px 25px -5px #000000;
    padding: 12px;
    display: inline-block;
}

Here is a demo for you .请注意，您应该从 <h5> 中删除负边距。也是。