css - 具有最大宽度的 Foundation Reveal 模态

Question

这是一个fiddle .

我正在使用 Foundation框架，特别是 reveal单击按钮后弹出窗口滑入 View 的插件。这将包含一张图片，我想填满整个弹出窗口。

除非窗口大小比图像宽，否则这种方法效果很好，在这种情况下图像不再填满整个弹出窗口。我可以通过覆盖一些 CSS 来解决这个问题:

.reveal-modal {
    padding: 0;
    max-width: 950px; /* always will be maximum image width */
    background: transparent;
}

但是，在执行此操作后，我想不出一种使弹出窗口在窗口中水平居中的好方法。有什么想法吗？

Answer 1

想出了一个解决方案，不知道为什么我没有早点想到它。我只是将模态中的所有内容放入另一个具有以下样式的 div 中:

.reveal-modal-inner {
    margin: 0 auto;
    position: relative;
    max-width: 950px;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4);
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

完美运行，这里是 updated fiddle .