css文字宽度超过图像

Question

我尝试调整文字宽度与图像宽度相同。 这是我的代码的一部分：

<style>
   .sign {
   position: relative;
   float: left;
   }
   .sign figcaption {
    position: absolute;
    bottom: 0;
    width: 100%;
    color: white;
    text-align: center;
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(0, 0, 0, 0.7);
    padding: 3px;
    display: none;
   }
</style>

<script>
$(document).ready(function() {
   $(".sign").mouseenter(function(){
        $("figcaption").slideToggle();
   });
   $(".sign").mouseleave(function(){
        $("figcaption").slideToggle();
   });
});
</script>

<div class="sign">
   <img src="<c:url value="resources/img/girl.jpeg"/>">
   <figcaption>change picture</figcaption>
</div>

当我设置宽度100％时，我的文字区域宽度更多

---

我是css的新手，请帮忙解决。

Answer 1

这与您放在标题上的左右填充有关。生成的宽度是宽度+填充的值。我建议阅读有关盒子模型的信息：http://www.w3.org/TR/CSS21/box.html

为了更有帮助：因为文本居中，只需删除左右两边的填充。

.sign figcaption{
    padding: 3px 0px;
}

JSFiddle：http://jsfiddle.net/LsQ2d/