如何将包含图像的span放在div中心 [英] How to center a span containing an image in a div

问题描述

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

I have a main div (#homeGallery), in which i have a span(.imgClass) that is used to load one of a list of images. I need the image to be centered not only vertically but horizontally in the div.

到目前为止，我有这个代码。

So far I have this code.

#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;
}

任何帮助都不胜感激。

推荐答案

这是我最近找到的宝石。使用位置：绝对，上，左，下和右。

This is a jewel I found recently. Use position: absolute with a top, left, bottom and right. You can center your span horizontally and vertically.

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/

这篇关于如何将包含图像的span放在div中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！