定位div

时间：2015-11-08 13:36:48

标签： html css

想知道是否有人能够提供帮助，我正试图定位一个div，但它似乎根本没有移动。这是代码：

.gallery-photos clearfix {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}
.gallery-photos {
  padding: 20px;
}
.gallery-photos .big-photo {
  display: block;
  background-color: #ffffff;
  padding: 3px;
  border: 1px solid #e7e7e7;
  margin-right: 210px;
}
.gallery-photos .big-photo img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.gallery-photos .photo-thumbnails {
  float: right;
  width: 210px;
}
.gallery-photos .photo-thumbnails .thumbnail {
  float: left;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 30%;
  height: 63px;
  cursor: pointer;
  padding: 3px;
  border: 1px solid #e7e7e7;
  margin-left: 3.33333%;
  margin-bottom: 6px;
  opacity: 0.4;
}
.gallery-photos .photo-thumbnails .thumbnail.current {
  opacity: 1;
  background-color: #ffffff;
}
.gallery-photos .photo-thumbnails .thumbnail .thumbnail-inner {
  height: 100%;
  overflow: hidden;
}
.gallery-photos .photo-thumbnails .thumbnail img {
  display: block;
  width: auto;
  max-height: 100%;
  margin: 0 auto;
}
<div class="gallery-photos clearfix">
  <div class="photo-thumbnails">
    <div class="thumbnail current">
      <div class="thumbnail-inner">
        <img src="images/1.jpg" alt="" />
      </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner">
        <img src="images/2.jpg" alt="" />
      </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner">
        <img src="images/3.jpg" alt="" />
      </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner">
        <img src="images/4.jpg" alt="" />
      </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner">
        <img src="images/5.jpg" alt="" />
      </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner">
        <img src="images/6.jpg" alt="" />
      </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner">
        <img src="images/1.jpg" alt="" />
      </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner">
        <img src="images/2.jpg" alt="" />
      </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner">
        <img src="images/3.jpg" alt="" />
      </div>
    </div>
  </div>
  <div id="big-photo" class="big-photo">
    <img src="images/1.jpg" alt="" />
  </div>
</div>

3 个答案:

答案 0 :(得分：2)

将此选择器：.gallery-photos clearfix{更改为.gallery-photos.clearfix{

要使元素居中，您可以这样做：

.gallery-photos.clearfix{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

答案 1 :(得分：1)

试试这个https://jsfiddle.net/2Lzo9vfc/31/

HTML 

<div class="gallery-photos clearfix">
  <div class="photo-thumbnails">
    <div class="thumbnail current">
      <div class="thumbnail-inner"> <img src="http://placehold.it/350x150" alt="" /> </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner"> <img src="http://placehold.it/350x150" alt="" /> </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner"> <img src="http://placehold.it/350x150" alt="" /> </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner"> <img src="http://placehold.it/350x150" alt="" /> </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner"> <img src="http://placehold.it/350x150" alt="" /> </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner"> <img src="http://placehold.it/350x150" alt="" /> </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner"> <img src="http://placehold.it/350x150" alt="" /> </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner"> <img src="http://placehold.it/350x150" alt="" /> </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner"> <img src="http://placehold.it/350x150" alt="" /> </div>
    </div>
  </div>
  <div id="big-photo" class="big-photo"> <img src="http://placehold.it/900x600" alt="" /> </div>

<强> CSS 

    .gallery-photos.clearfix{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}


.gallery-photos {
    padding: 20px;
}

.gallery-photos .big-photo {
    display: block;
    background-color: #ffffff;
    padding: 3px;
    border: 1px solid #e7e7e7;
    margin-right: 210px;
}

.gallery-photos .big-photo img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}



.gallery-photos .photo-thumbnails {
    float: right;
    width: 210px;

}

.gallery-photos .photo-thumbnails .thumbnail {
    float: left;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 30%;
    height: 63px;
    cursor: pointer;
    padding: 3px;
    border: 1px solid #e7e7e7;
    margin-left: 3.33333%;
    margin-bottom: 6px;
    opacity: 0.4;
}

.gallery-photos .photo-thumbnails .thumbnail.current {
    opacity: 1;
    background-color: #ffffff;
}

.gallery-photos .photo-thumbnails .thumbnail .thumbnail-inner {
    height: 100%;
    overflow: hidden;
}

.gallery-photos .photo-thumbnails .thumbnail img {
    display: block;
    width: auto;
    max-height: 100%;
    margin: 0 auto;
}

答案 2 :(得分：0)

如果您使用position: absolute，请在父级position: relative上使用body { position: relative }。如果您在身体上设置身高和宽度也会更容易（在您的情况下100vw 1}} 100vh上的body，它是完整的视口（整个可视区域）。

html,

body {

  position: relative;

  height: 100vh;

  width: 100vw;

}

.gallery-photos.clearfix {

  position: absolute;

  top: 50%;

  left: 50%;

  margin-top: -50px;

  margin-left: -50px;

}

.gallery-photos {

  padding: 20px;

}

.gallery-photos .big-photo {

  display: block;

  background-color: #ffffff;

  padding: 3px;

  border: 1px solid #e7e7e7;

  margin-right: 210px;

}

.gallery-photos .big-photo img {

  display: block;

  max-width: 100%;

  height: auto;

  margin: 0 auto;

}

.gallery-photos .photo-thumbnails {

  float: right;

  width: 210px;

}

.gallery-photos .photo-thumbnails .thumbnail {

  float: left;

  box-sizing: border-box;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  width: 30%;

  height: 63px;

  cursor: pointer;

  padding: 3px;

  border: 1px solid #e7e7e7;

  margin-left: 3.33333%;

  margin-bottom: 6px;

  opacity: 0.4;

}

.gallery-photos .photo-thumbnails .thumbnail.current {

  opacity: 1;

  background-color: #ffffff;

}

.gallery-photos .photo-thumbnails .thumbnail .thumbnail-inner {

  height: 100%;

  overflow: hidden;

}

.gallery-photos .photo-thumbnails .thumbnail img {

  display: block;

  width: auto;

  max-height: 100%;

  margin: 0 auto;

}
<div class="gallery-photos clearfix">
  <div class="photo-thumbnails">
    <div class="thumbnail current">
      <div class="thumbnail-inner">
        <img src="http://placehold.it/210/000/0f0.png&text=IMG" />
      </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner">
        <img src="http://placehold.it/210/0e0/aa0.png&text=IMG" />
      </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner">
        <img src="http://placehold.it/210/ff0/07c.png&text=IMG"/>
      </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner">
        <img src="http://placehold.it/210/4cd/b40.png&text=IMG"/>
      </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner">
        <img src="http://placehold.it/210/9e0/160.png&text=IMG"/>
      </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner">
        <img src="http://placehold.it/210/e56/111.png&text=IMG"/>
      </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner">
        <img src="http://placehold.it/210/05f/7be.png&text=IMG"/>
      </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner">
        <img src="http://placehold.it/210/6d0/5ae.png&text=IMG"/>
      </div>
    </div>
    <div class="thumbnail">
      <div class="thumbnail-inner">
        <img src="http://placehold.it/210/fa8/9f0.png&text=IMG"/>
      </div>
    </div>
  </div>
  <div id="big-photo" class="big-photo">
    <img src="http://placehold.it/480x320/000/0f0.png&text=IMG" />
  </div>
</div>

相关问题
最新问题