在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屋!