CODEWITHSUNDEEP
htmlcssimagecenter
Willing
Willing

Reputation: 612

Images on center in the division

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.

enter image description here

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

Upvotes: 2

Views: 218

Answers (1)

Sowmya
Sowmya

Reputation: 26969

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

Upvotes: 4

Related Questions