尝试使用 CSS 在 iframe 中将 Wufoo 表单居中

Question

我正在将 Wufoo 用于 Web 表单。表格在我的 iframe 页面中。它们允许您使用自定义 CSS 来设置表单样式。我正在尝试使 iframe 中的表单居中。

这是我在 iframe 中显示表单时从页面中抓取的 HTML：

<div id="container" class="ltr">
    <form id="form2" name="form2" class="wufoo topLabel page1 hideHeader" accept-charset="UTF-8" autocomplete="off" enctype="multipart/form-data" method="post" novalidate="true" action="https://peakinbound.wufoo.com/embed/mtco4fp0qomvz2/def/&amp;header=hide#public">
        <ul>
            <li id="fo2li1" class="notranslate">
                <label class="desc" id="title1" for="Field1">
                    Name<span id="req_1" class="req">*</span>
                </label> 
                <span> 
                    <input id="Field1" name="Field1" type="text" class="field text fn" value="" size="8" tabindex="1" onkeyup="handleInput(this);" onchange="handleInput(this);" required="true" />
                    <label for="Field1">First</label>
                </span>
                <span>
                    <input id="Field2" name="Field2" type="text" class="field text ln" value="" size="14" tabindex="2" onkeyup="handleInput(this);" onchange="handleInput(this);" required="true" />
                    <label for="Field2">Last</label>
                </span>
            </li>
            <li id="fo2li3" class="notranslate">
                <label class="desc" id="title3" for="Field3">
                    Email<span id="req_3" class="req">*</span>
                </label>
                <div>
                    <input id="Field3" name="Field3" type="email" spellcheck="false" class="field text medium" value="" maxlength="255" tabindex="3" onkeyup="handleInput(this);" onchange="handleInput(this);" required="true" />
                </div>
            </li>
            <li class="buttons ">
                <div>
                    <input type="hidden" name="currentPage" id="currentPage" value="jssDPjBF2iK6t1UvInla0mSUbe82kYF5HwuBetLwuBe5y49jw=" />
                    <input id="saveForm" name="saveForm" class="btTxt submit" type="submit" value="GET INFO" onmousedown="doSubmitEvents();" />
                </div>
            </li>
        </ul>
    </form>
</div>
<!--container-->

我尝试在 CSS 上使用它，但它没有使表单居中。

#container {
    width: 350;
    height: 250; 
    margin:0 auto;
}

关于如何使此表单居中的任何想法？

感谢您的帮助。

Answer 1

你需要声明一个单位为px。
http://jsfiddle.net/73TSr/10/
http://jsfiddle.net/73TSr/10/show

#iframe-container {
    width: 350px;
    height: 300px; 
    margin:0 auto;
}
#iframe-container > iframe {
    overflow-y: auto;
    border: none;
    height: 100%;
    width: 100%;
}