Question

目前我无法解决的问题是在其他div内垂直对齐div，这样带图像的旋转木板总是位于中间，无论高度如何。

div.flickity-viewport的高度是从div.for高度自动生成的，在这种情况下包含图片和说明。

HTML

<div class="gallery gallery-main js-flickity gallerymain inner"  data-flickity-options='{"freeScroll": false, "wrapAround": true, "prevNextButtons": false, "pageDots": false, "imagesLoaded": true, "percentPosition": false}'>
          <div class="for" > 
              <img src="http://s27.postimg.org/u7fo6xssj/image.jpg"> 
              <p id="description">Andrew Malin, Barcelona 2015</p>
          </div>
          <div class="for" > 
              <img src="http://s27.postimg.org/z8n28b08z/image.jpg"> 
              <p id="description">THEME, PLACE, MOUNTH AND YEAR</p>
          </div>
          <div class="for" > 
              <img src="http://s27.postimg.org/4sh5a6epv/image.jpg"> 
              <p id="description">THEME, PLACE, MOUNTH AND YEAR</p>
          </div>
          <div class="for" > 
              <img src="http://s27.postimg.org/52ontitc3/image.jpg"> 
              <p id="description">THEME, PLACE, MOUNTH AND YEAR</p>
          </div>
          <div class="for" > 
              <img src="http://s27.postimg.org/52ontitc3/image.jpg"> 
              <p id="description">THEME, PLACE, MOUNTH AND YEAR</p>
          </div>
        </div>

        <div class="gallery gallery-nav js-flickity gallerysub" data-flickity-options='{ "asNavFor": ".gallery-main", "contain": true, "pageDots": false, "imagesLoaded": true, "percentPosition": false, "prevNextButtons": false, "cellAlign": "center"}'>
                  <div class="nav" > 
              <img src="http://s27.postimg.org/u7fo6xssj/image.jpg"> 
          </div>
          <div class="nav" > 
              <img src="http://s27.postimg.org/z8n28b08z/image.jpg"> 
          </div>
          <div class="nav" > 
              <img src="http://s27.postimg.org/4sh5a6epv/image.jpg"> 
          </div>
          <div class="nav" > 
              <img src="http://s27.postimg.org/52ontitc3/image.jpg"> 
          </div>
          <div class="nav" > 
              <img src="http://s27.postimg.org/52ontitc3/image.jpg"> 
          </div>
        </div>
        </div>

CSS

.flickity-enabled {
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;

}

div.flickity-viewport {
  vertical-align: middle;
  text-align: center;   
  /*margin: 10%;*/
}

div.flickity-slide {
  height: 100%;
  background: red;
}

.flickity-enabled:focus { outline: none; }

.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
          tap-highlight-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body { font-family: sans-serif; }



div.for img {
  /*margin-top: 130px; */
  display: block;
  height: 500px;
}


.gallery-nav img {
  display: block;
  height: 80px;
  position: relative;
  float: left;

}

div.for {
  margin-right: 80px;
}

{
 /* margin-top: 90px;*/
}

.gallerysub {

  position: fixed;
  bottom: 0;
  height: 80px;
  width: 100%;
  margin-top: 30px;
}



#modelname, #description {
  font-family: Source Sans Pro, sans-serif;
  font-size: 16px;
  /*text-align: right;*/
  float: right;
}

#description {
  color: rgb(200, 200, 200);
  font-weight: 300;
  font-style: italic;
  margin: 0;
  margin-top: 15px;
}

#modelname {
  color: #434343;
  font-weight: 400;
  margin: 0;
  margin-top: 15px;
  margin-right: 15px;
}

.is-nav-selected img {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(grayscale.svg); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */
}

body {
  overflow-x: hidden;
}

Answer 1

也许这可能会有所帮助：

.flickity-viewport {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

在页面中出现中心div

1 个答案: