Question

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

我也需要多次这样，所以我不想每次都添加更多的CSS代码。

这就是我在DIV的CSS和HTML方面所拥有的。

.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>

Answer 1

为了表示赞赏，我查看了这篇非常有用的文章：http://phrogz.net/css/vertical-align/index.html

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

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

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

Answer 2

直接使用css你可以将图像包含在div标签中，你可以使它集中在一起，不需要在div中添加img标签并使其中心化，你也可以观察主div使用css控制图像

<div class="right-panel"></div>

.right-panel{
height: 25%;    
width: 50px;    
background: url(/assets/image-png/rightPanel_3.png);
background-repeat: no-repeat;
background-position: 0px;
background-size: 48px 64px;
 }

DIV中的中心图像

2 个答案: