如何在 div 中居中包含图像的跨度 [英] How to center a span containing an image in a div

问题描述

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

到目前为止我有这个代码.

#homeGallery >.imgClass{保证金:自动；位置:相对；顶部:0；底部:0；显示:块；左:0；右:0；}

和

#homeGallery >.imgClass >图片{保证金:自动；浮动:中心；最大宽度:60%；最大高度:99%；边框:2px 实心；}

任何帮助将不胜感激

解决方案

这是我最近发现的一颗宝石.使用位置:绝对，有顶部、左侧、底部和右侧.您可以水平和垂直居中您的跨度.

HTML:

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

CSS:

.wrapper {宽度:400px；高度:400px；位置:相对；背景颜色:#afaff;}.wrapper .image {位置:绝对；顶部:25%；左:25%；正确:25%；底部:25%；背景色:#000；}

<小时>

http://jsfiddle.net/QTDrm/

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

and

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

Any help would be appreciated

解决方案

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/

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