绝对定位布局 - 前一个div的垂直中心

Question

我的问题的一个简化版本是我想要一个＆＃39;文本＆＃39;分享一个＆＃39;图像＆＃39; div在屏幕模式下，但在移动设备上将它们放在彼此之下。

HTML

<div class="wrapper">
  <article> </article>

  <div class="text-cell">
    <h2>Title</h2>
    <h3>Category</h3>
  </div>  
</div>

CSS

.wrapper {
 position: relative;
 margin: 0; 
 padding: 0;
}

article { 
   height: 350px;
   width: 100%;
   border-top: 1px solid #000;
   background-size: cover;
   background-repeat: no-repeat;    
}

.text-cell {
  position: absolute;
  z-index: 10;
  width: 100%;
  margin: 0;
  bottom: 0;
}

@media screen and (max-width: 768px) {

.text-cell {
  position: relative;
  border-top: solid 1px #000;
  background-color: rgba(250, 250, 250, 1);
}

}

这是我最接近的。它将＆＃39;文本单元格放在一起。在屏幕尺寸和移动尺寸下方的物品上方。

我希望它垂直居中于文章＆＃39;屏幕尺寸，因为它调整大小。 ＆＃39;文本的单元格＆＃39;没有定义的尺寸，理想情况下，我希望文章是一个百分比或更具响应性的尺寸，但这并不重要。

编辑 - 这个html是Wordpress循环的一部分，意味着它生成了一定次数，每个都堆叠在另一个之下。 （例如＆lt; div class =＆＃34; wrapper＆＃34;＆gt;堆叠的前3个副本）

我想要的是什么

Answer 1

我建议做的第一件事就是将var photoNames: [String] = [] var query = PFQuery(className: "Photos") query.findObjectsInBackgroundWithBlock ({(objects:[AnyObject]?, error: NSError?) in if(error == nil){ self.photoNames = objects.map { $0.objectForKey("PhotoName") as! String } } else{ println("Error in retrieving \(error)") } }) div放在文章的上方，这样，在移动设备上，静态放置在您希望放置的位置，遵循自然文档层次结构。这就是我在代码段中所做的事情（我还在媒体查询中将其位置更改为.text-cell。）

话虽如此，我个人会考虑更改HTML的结构以具有更多语义含义（例如，将static＆amp; h2标记放在h3标记内将其放在header标记内。）

如果您需要帮助，请解释您在文章中尝试实现的目标，并且我很乐意帮助您实现您正在寻找的目标。

＆＃13;

＆＃13;

article

＆＃13;

.wrapper {
  position: relative;
  margin: 0;
  padding: 0;
}
article {
  height: 350px;
  width: 100%;
  border-top: 1px solid #000;
  background-size: cover;
  background-repeat: no-repeat;
}
.text-cell {
  position: absolute;
  z-index: 10;
  width: 100%;
  margin: 0;
  bottom: 0;
}
@media screen and (max-width: 768px) {
  .text-cell {
    position: static;
    border-top: solid 1px #000;
    background-color: rgba(250, 250, 250, 1);
  }
}

＆＃13;

＆＃13;

＆＃13;