jquery - 左对齐 Magnific Popup - 内嵌到 DIV ID

Question

我对华丽的弹出窗口有点问题。我想将弹出窗口左对齐，而不是让它相对于浏览器显示在屏幕中心。知道怎么做吗？我似乎无法找到弹出窗口的相关内容(我已经尝试了几个小时，而且我是 jQuery 的新手)。我试过继承、固定、绝对，每次缩小时弹出窗口都会出现在屏幕的不同区域。

总结一下，我要复制这个网站:http://www.madridmontessori.org/site_eng.html (然而，这是在 Flash 中完成的)

我不确定尝试这些设置对我来说是否是个好主意，但我还是做了......它对我没有太大帮助 =S

.mfp-container {
  position: absolute;
  width: 1167px;
  height: auto;
  margin-left:auto;
  margin-right:auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color:red; }

至于 jQuery 代码，我什至不打算把它放上去，因为我没有在没有错误的情况下超过一行。 =D

这里有一些可能对你有帮助的失败尝试:

<div id="body" style="position:absolute;">
<div id="popup-1" class="zoom-anim-dialog mfp-hide" style="position: relative; top: 30px; left: 50px;">
    <h1>Title here</h1>
    <p>Content here  </p>
</div>

--

#popup-1 {
    background: white;
    padding: 10px 20px;
    text-align: left;
    max-width: 500px;
    top:150px;
    left: 30px;
    position: relative;
}

Answer 1

尝试添加float: left:

#popup-1 {
    background: white;
    padding: 10px 20px;
    text-align: left;
    max-width: 500px;
    top:150px;
    left: 30px;
    position: relative;
    float:left
}

还有:

.mfp-container {
    float:left;
    padding:0!important;
}