无法在CSS边框中居中图像

Question

我正在尝试为图标添加小边框。

问题是，图像位于有边框的顶部，但我希望它显示在中心。这就是目前的样子

我的边框CSS样式：

div.Icon{
    float:left;
    border:1px #ccc solid;
    padding:3px;
    height:80px;
    width:110px;
    }

div.Icon img{
    text-align:center;
    }

Answer 1

将div中的图像居中作为背景。

div.Icon{
    float:left;
    border:1px #ccc solid;
    padding:3px;
    height:80px;
    width:110px;
    background:url(yourimage.gif) no-repeat 50% 50%;
}

修改

...如果图片必须是动态的，您可以直接在html中的元素的background-image属性中设置style。

<div style="background-image:url(<?php //whatever ?>);"></div>

在css中，您可以删除路径...

background:no-repeat 50% 50%;

Answer 2

您是否尝试过将边框设置为图像本身而不是围绕图像的div？：

img.icon {
    padding: 3px;
    border: 1px solid #ccc;
    }

然后您不需要在CSS中设置高度和宽度，也不需要在图像周围包含不必要的div。

Answer 3

添加一些填充=）

div.Icon img {
text-align:center;
padding-top: 30px;
}