尝试使用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%;
}