Требуется вертикальное центрирование изображений внутри div, но ответы, найденные здесь, не работают

Question

Я сделал это:

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

и это

img {
vertical-align: middle;
}

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

Это CSS родительского 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;
}

Я не знаюкакие размеры изображений будут.Я только знаю, что они не будут больше, чем 200X200.Контейнер div родительского элемента не имеет стиля.Есть ли что-то, что я делаю неправильно, о котором я не знаю?Я понимаю, что этот вопрос задавали много.

Answer 1

У вас есть родительский контейнер для #parent? если это так, ему нужно следующее css:

#parentOf #parent{ display: table; }

Если нет, поместите еще один div вокруг изображения под названием content и попробуйте:

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

Answer 2

Попробуйте это, когда внутренний div содержит ваше изображение.

разметка :

<div class="outer">
  <div class="inner">
    <img src="url" />
  </div>
</div>

css :

.outer{position:relative;}
.inner{
position:absolute;top:50%;
}

js :

$(document).ready(function(){
var inner = $('.inner'),
    ht = inner.height();

inner.css({'margin':-ht/2+'px 0 0 0'});
});

Answer 3

Может быть, вам придется удалить float из DIV

Проверьте это http://jsfiddle.net/k9kVZ/