css - 如何将包含图像的跨度居中放置在 div 中

Question

我有一个主 div (#homeGallery)，其中有一个 span(.imgClass) 用于加载图像列表之一。我需要图像在 div 中不仅垂直居中而且水平居中。

到目前为止我有这段代码。

#homeGallery > .imgClass{
 margin:auto;
 position: relative;
 top: 0;
 bottom: 0;
 display: block;
 left: 0;
 right: 0;
}

和

#homeGallery > .imgClass > img {
 margin:auto;
 float:center;
 max-width:60%;
 max-height:99%;
 border: 2px solid;
}

任何帮助将不胜感激

Answer 1

这是我最近发现的一颗 gem 。使用 position: absolute 和 top, left, bottom 和 right。您可以水平和垂直居中您的跨度。

HTML:

<div class="wrapper">
    <span class="image"></span>
</div>

CSS:

.wrapper {
    width:400px;
    height: 400px;
    position: relative;
    background-color: #afafaf;
}

.wrapper .image {
    position: absolute;
    top: 25%;
    left: 25%;
    right: 25%;
    bottom: 25%;
    background-color: #000;
}

---

http://jsfiddle.net/QTDrm/