Question

我有一个响应式图库; jquery插件名为Galleria。我试图将div元素放在图库的顶部，并在Galleria中垂直和水平居中，无论屏幕大小如何。

这就是我在视图中看起来简化的方式：

<div class="galleria">
   <%= image_tag "gallery/1.jpg" %>
   <%= image_tag "gallery/2.jpg" %>
   <%= image_tag "gallery/3.jpg" %>
</div>

<div id="input-box">
    <!-- content -->
</div>

<script type="text/javascript">
    function start(){
        Galleria.loadTheme('theme/path');
        Galleria.run('.galleria', {
            wait: true,
            responsive: true,
            height: 0.5
        });
    }
</script>

我知道如果我希望位置input-box高于其他元素并将其垂直和水平居中，我会做这样的事情：

#input-box{
  position:absolute;
  top: 50%;
  right: 0 ;
  bottom : 0 ;
  left : 0 ;
  margin : auto;
  width: 30px;
  z-index: 26;
}

无论屏幕大小如何，此方式元素始终居中。问题是不可能像Galleria那样调整它，因为Galleria具有响应性和不同的扩展性。我试图将<div id="input-box">置于<div class="galleria">内，但之后根本没有显示。如何将一个元素置于另一个响应元素上方并根据屏幕大小进行缩放？

感谢您的帮助！

Answer 1

在这种情况下，您需要以下代码

<div class="galleria">

    <%= image_tag "gallery/1.jpg" %>
    <%= image_tag "gallery/2.jpg" %>
    <%= image_tag "gallery/3.jpg" %>


    <div id="input-box">
        <!-- content -->
    </div>

</div>

关注CSS

.galleria {position:relative;}
.input-box {width:100px; height:200px; position:absolute; left:50%; top:50%; margin-left:-50px (half of its width); margin-top:-100px (half of its height);}

即使父母有反应，孩子（即输入框）也总是在中心（垂直和水平）。

Answer 2

也许你可以使用display：table和table-caption包装输入到p：

<div>
  <img src="http://lorempixel.com/300/180/"/>
  <img src="http://lorempixel.com/300/180/"/>
  <img src="http://lorempixel.com/300/180/"/>
  <div id="input-box">
      <form>
        <p>See me on top <input /></p>
        <p><input type="submit"/></p>
      </form>

div {
  display:table;
  text-align:center;
  margin:auto;
  width:80%;/* or whatever */
}
div img {width:30%;}
div #input-box {
  display:table-caption;
  caption-side:top;/* or just : display:table-header-group; */
}

http://codepen.io/anon/pen/DCfBA

这是一个基本的例子。您可以修复添加table-layout:fixed;的div宽度，隐藏overflow并将任何其他width设置为图像。关键是要将input放在最前面：）

anoter版本的乐趣，看到它以某种方式工作相似的galleria：http://codepen.io/gc-nomade/pen/yHIeo，点击图片看下一个...它循环回到第一个。

Answer 3

你能不能给它另一个包装器，比如：

<div class="gallery-wrapper">
  <div class="galleria">
   <%= image_tag "gallery/1.jpg" %>
   <%= image_tag "gallery/2.jpg" %>
   <%= image_tag "gallery/3.jpg" %>
  </div>

  <div id="input-box">
    <!-- content -->
  </div>
</div>

这应该允许jquery正常操作.galleria，这应该驱动.gallery-wrapper的大小。然后将.gallery-wrapper设置为position: relative;并将#input-box设置为position: absolute，您应该能够根据需要将其放在中心，这个额外的包装元素本身正在调整大小通过.galleria代码。

将一个元素置于另一个元素上方，该元素具有响应性并根据屏幕大小进

3 个答案: