css - 无法在 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 元素的 style 属性中设置 background-image。

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

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

background:no-repeat 50% 50%;