如何将包含图像的跨度居中在div中

时间:2013-09-11 15:09:44

标签: css web html

我有一个主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;
}

任何帮助将不胜感激

6 个答案:

答案 0 :(得分:1)

您可以尝试以下代码: -

   #homeGallery > .imgClass > img { 

            position:absolute;
            left:0;
            right:0;
            top:0;
            bottom:0;
            margin:auto;
            max-width:100%;
            max-height:100%;
            overflow:auto;
        }

答案 1 :(得分:1)

这是我最近发现的一颗宝石。使用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/

答案 2 :(得分:0)

您可以尝试以下操作:

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

答案 3 :(得分:0)

这是Fiddle

#homeGallery .imgClass {
  position: relative;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
}

如果您不知道图像宽度&amp;高度比你可以使用jQuery解决方案

$(function() {

  var imgW = $('.imgClass').outerWidth(),
      imgH = $('.imgClass').outerHeight();

  $('.imgClass').css({ marginLeft: - imgW / 2 + 'px', marginTop: - imgH / 2 + 'px' });

});

和这个CSS

#homeGallery .imgClass {
  position: relative;
  top: 50%;
  left: 50%;
}

答案 4 :(得分:0)

如果你想要一个元素的垂直和水平居中,你应该看看这种方法:

jsFiddle

It works in all current browsers and IE8+

<强> HTML

<div>
  <span class="element"></span> <!-- This can be any element -->
</div>

<强> CSS

html, body {
    width: 100%;
    height: 100%;
    display: table;
}
body > div {
    display: table-cell;
    vertical-align: middle;
}
body > div > .element {
    display: block;
    margin: 0px auto;
}

如果img位于spandiv内的text-align: center,请使用我上面概述的方法解决这个问题: {{3} }

请注意,我必须更改一些CSS类,以使其与span中的图像很好地协作。我在div上设置了display: inline-block;,在span设置了body > div { display: table-cell; vertical-align: middle; text-align: center; } body > div > .element { display: inline-block; } 。下面我已经插入了必须更改的完整课程,以使其适合您的情况。

<强> CSS

{{1}}

答案 5 :(得分:0)

这是我首选的方法:

<强> HTML

<div id="homeGallery">
    <span class="imgClass">
        <span class="fakeImg">You can use whatever img you want here</span>
    </span>
</div>

<强> CSS

#homeGallery{
    height: 400px;
    border: 1px solid #333;
    text-align: center;
}
#homeGallery:before{
    content: '';
    height: 100%;
    vertical-align: middle;
    display: inline-block;
}

.imgClass{
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    background-color: blue;
}

jsfiddle here

好的一面是这是100%基于CSS的垂直对齐。您不必担心屏幕大小或DOM大小更改。

缺点是它不适用于IE7或更低版​​本。