Question

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 like 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;
    }

Answer 1

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%;