需要在div中垂直居中的图像，但在这里找到的答案不起作用 [英] Needing to vertical center images inside div but answers found here aren't working

问题描述

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

和

  img {
 vertical-align：middle; 
} 
 
 #parent {
 height：200px; 
 line-height：200px; 
} 
  

这是父div的css

  #parent {
 display：table-cell; 
 vertical-align：middle; 
职位：亲属; 
 float：left; 
 margin：5px 5px 5px 5px; 
 width：200px; 
 height：200px; 
 background-color：＃e0ffff; 
 border-style：solid; border-width：5px; 
} 
  

我不知道图像的尺寸是多少。我只知道他们不会超过200X200。父母的div容器没有样式。有什么我做错了，我不知道？我意识到这个问题已经被问了很多。

解决方案

你有一个父容器用于#parent吗？如果是这样，它需要下面的CSS：

  #parentOf #parent {display：table; } 
  

如果不是这样，请在名为content的图片上放置另一个div并尝试：

  #content {
 postition：absolute; 
 top：50％; 
} 
  

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.

解决方案

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

这篇关于需要在div中垂直居中的图像，但在这里找到的答案不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！