Can't center image in CSS border

I am trying to add a small border to an icon.

The problem is, the image is in the top of bordered box, but I want it to display in the center. Here is what it looks lik开发者_运维百科e at present

My border CSS style:

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

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

Center the image in the div as its background.

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

EDIT:

...And if the image has to be dynamic, you could set the background-image directly in the style attribute of you element in your html.

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

In the css, you can then just remove the path...

background:no-repeat 50% 50%;

Have you tried just setting the border to the image itself instead of a div wrapping around the image?:

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

Then you wouldn't need to set the height and width in CSS and you wouldn't need to wrap an unnecessary div around the image.

Add some padding =)

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