1

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

任何帮助，将不胜感激

4

6 回答 6

1

你可以试试这个代码： -

   #homeGallery > .imgClass > img { 

            position:absolute;
            left:0;
            right:0;
            top:0;
            bottom:0;
            margin:auto;
            max-width:100%;
            max-height:100%;
            overflow:auto;
        }
于 2013-09-11T15:25:20.803 回答
1

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

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/

于 2013-09-11T15:25:28.443 回答
0

您可以尝试以下方法：

#homeGallery > .imgClass > img {
 margin:0px auto;
 display:block;
 max-width:60%;
 max-height:99%;
 border: 2px solid;
}
于 2013-09-11T15:20:00.237 回答
0

这是一个小提琴

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

如果您不知道图像的宽度和高度，则可以使用 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%;
}
于 2013-09-11T16:00:17.290 回答
0

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

jsFiddle

它适用于所有当前的浏览器和 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;
}

在您使用imginside a spaninside a的特定情况下div，我将使用上面概述的方法以这种方式解决它：jsFiddle

请注意，我必须更改一些 CSS 类才能使其与跨度内的图像很好地配合使用。我已经设置text-align: center了div和display: inline-block;。span下面我插入了我必须更改以使其适合您的情况的完整课程。

CSS

body > div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
body > div > .element {
    display: inline-block;
}
于 2013-09-11T16:42:55.567 回答
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在这里。

好的方面是这是 100% 基于 css 的垂直对齐。您不必担心屏幕大小或 DOM 大小的变化。

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

于 2013-09-12T08:26:15.253 回答