Search code examples
htmlcssimagecenter

Needing to vertical center images inside div but answers found here aren't working

I've done this:

#parent {
display:table-cell;
vertical-align:middle;
}

and this

img {
vertical-align: middle;
}

#parent {
height:200px;
line-height: 200px;
}

This is the css of the parent div

#parent{
display: table-cell; 
vertical-align: middle;
position:relative;
float:left;
margin: 5px 5px 5px 5px;
width:200px;
height:200px;
background-color:#e0ffff;
border-style:solid;border-width:5px;
}

I do not know what the dimensions of the images will be. I only know they will not be greater than 200X200. The div container of the parent has no styling. Is there something I am doing wrong that I don't know about? I realize this question has been asked a lot.

Solution

  • Do you have a parent container for #parent? if so it needs the following css:

    #parentOf #parent{ display: table; }

    If not, put another div around the image called content and try:

    #content{
    postition: absolute;
    top: 50%;
}