如何在 twitter 引导页面中将 mailchimp 嵌入表单居中？答案

【问题标题】：How do I center a mailchimp embed form in a twitter bootstrap page?如何在 twitter 引导页面中将 mailchimp 嵌入表单居中？
【发布时间】：2014-06-22 20:57:29
【问题描述】：

这是嵌入代码。

     <!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
    /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="http://unityi.us2.list-manage.com/subscribe/post?u=a93bfac69d884f15e416661bb&amp;id=4618e101c1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>

<!--End mc_embed_signup-->

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

你可以只添加中心标签吗？我已经尝试过了，它有效。简单的答案:)

</style>

<!-- ADD HERE -->
**<center>**

<div id="mc_embed_signup">
<form action="http://unityi.us2.list-manage.com/subscribe/post?   u=a93bfac69d884f15e416661bb&amp;id=4618e101c1" method="post" id="mc-embedded-subscribe- form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>

<!-- AND CLOSE HERE -->
**</center>**

<!--End mc_embed_signup-->

【讨论】：

【解决方案2】：

添加属性“display:block”和“margin:auto”应该可以做到。您也可以将表单放在网格中，但这会更复杂

【讨论】：