Question

I have divisions(same width and height) with image(different width and height). I try to center on that image inside the division. so use

{ text-align: center}

here the image comes center but top value is not changed.

Here the eg image what i exactly need.

Here the jsfiddle what i tried. I am waiting for your advice.
Thank you.

Answer 1

You can use display:table-cell to align the inner images to middle of the div.

But in this case you cant give margin because table-cell forces div to act as a td and technically you cant give margin to table td.

So I have added border to div with white color.

CSS

.background-image{
    width: 150px;
    height: 160px;
    background: #C8BFE7;
    text-align: center;
    display:table-cell;
    vertical-align:middle;
    border:white 5px solid
}
​

DEMO

——————————OR—————————————-

You can add an outer div to each div and specify margin to outer div.

CSS

.outer{margin: 0 0 10px 10px; display:inline-block}
.background-image{
    width: 150px;
    height: 160px;
    background: #C8BFE7;    
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}
​

DEMO 2