1

メインの div (#homeGallery) があり、そこには画像のリストの 1 つを読み込むために使用される 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

最近見つけた宝石です。使用位置：上、左、下、右の絶対位置。スパンを水平方向と垂直方向の中央に配置できます。

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 に答える
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 に答える
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 に答える