垂直中心不知道尺寸的图像 [英] vertical center an image without knowing dimensions

问题描述

我在我的网络开发生涯中集中了很多东西，但我想知道是否有一个简单的方法来垂直定位一个图像，而不知道图像的尺寸。想象一下我从数据库获得的缩略图列表。我不想让每个项目都贴在父div的顶部。

 < div id =wrapper > 
< div id =parent> 
< img src =path / i / got / from / database / image.png/> 
< / div> 
< / div> 
  

解决方案

p>

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

请注意，这将使父元素的行为像一个内联元素。 p>

示例。

I have centered a lot of stuff in my webdevelopment career, but I was wondering if there is a simple way to centering an image vertically without knowing the image's dimensions. Imagine a thumbnail list I get from the database. I don't want every item to be sticking to the top of the parent div.

<div id="wrapper">
    <div id="parent">
        <img src="path/i/got/from/database/image.png" />
    </div>
</div>

解决方案

You could use this CSS on your parent:

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

Note that this will make the parent element behave like an inline element.

Example.

这篇关于垂直中心不知道尺寸的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！