在DIV中居中图像 [英] Centre image in a DIV

问题描述

有很多关于SO的讨论，但我试过建议没有成功。我有一个DIV，我需要一个图像，其高度和宽度未知，水平和垂直居中。

There are numerous discussionsn on SO but I've tried suggestions without success. I have a DIV within which I need an image, whose height and width are unknown, to be centered horizontally and vertically.

我也需要多次，

这里是我在CSS和HTML方面的DIV。

Here's what I have in terms of CSS and HTML for the DIV.

.gallery_image_container {
    position: relative;
    width: 830px;
    height: 500px;
    z-index: 7;
    border: solid 4px #EAEAEA;
    background-image:url(bottom_back.png);
}

和

<div class="gallery_image_container">
<img src="image.png" />
</div>

推荐答案

http://phrogz.net/css/vertical-align/index.html

您需要向 .gallery_image_container 添加3个CSS规则：

You need to add 3 more CSS rules to .gallery_image_container:

text-align: center;
display: table-cell;
vertical-align: middle;

第一行很明显;它让你水平集中。
第二行使你的div以表格单元格的方式工作，第三行使垂直对齐发生。我会发布一个jsfiddle演示，但他们正在做一些维护的东西今天。我测试了它，它在当前的Chrome和FF和IE 8。

The first line is pretty obvious; it gets you centered horizontally. The second line gets your div to behave in a table cell-like manner, and the third makes the vertical alignment happen. I'd post a jsfiddle to demonstrate but they are doing some maintenance stuff today. I did test it and it worked in current Chrome and FF and IE 8.

这篇关于在DIV中居中图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！