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

您可以尝试以下代码： -

   #homeGallery > .imgClass > img { 

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

Answer 2

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

Answer 3

您可以尝试以下操作：

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

Answer 4

这是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%;
}

Answer 5

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

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位于span内div内的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}}

Answer 6

这是我首选的方法：

<强> 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或更低版本。

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

6 个答案: