html - 如何使 Mailchimp 注册表单 div 居中？

Question

我在堆栈上找到了这个问答，但两种解决方案都不起作用..

How do I center a mailchimp embed form in a twitter bootstrap page?

centering input in form mailchimp

我认为这些问题缺少的是表单代码和包含的样式代码(见下文)。我如何才能将内容(文本)和 div 本身作为一个整体居中，以便响应式地在页面上居中？

    <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>

    <center>
        <div class="display:block margin:auto "id="mc_embed_signup">
    <form action="//twitter.us11.list-manage.com/subscribe/post?u=b59cd34816a376a0c58945aee&amp;id=2e74fec4e5" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div id="mc_embed_signup_scroll">
        <label for="mce-EMAIL">Subscribe to our mailing list</label>
        <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
        <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
        <div style="position: absolute; left: -5000px;"><input type="text" name="b_b59cd34816a376a0c58945aee_2e74fec4e5" tabindex="-1" value="">
            </div>
        <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
            </div>
            </div>
            </div>   
</form>
    </div>
</center>

你可以看到我已经尝试了标签并改变了表单中的类..

非常感谢任何帮助:3

Answer 1

首先 - 删除中心标签和这个“类”:

class="display:block margin:auto"

其次 - 您可以将输入宽度设置为 100%，将 block 宽度设置为 58%:

#mc_embed_signup input.email {
  ...
  width: 100%;
  ...
}

#mc_embed_signup form {
  ...
  width: 58%;
  margin: auto;
}

示例:

<link href="https://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. */
  #mc_embed_signup label {
    text-align: center;
  }
  #mc_embed_signup input.email {
    width: 100%;
  }
  
  #mc_embed_signup input.button {
    margin: auto;
  }
  
  #mc_embed_signup form {
    width: 58%;
    margin: auto;
  }
</style>

<div class="display:block margin:auto" id="mc_embed_signup">
    <form action="//twitter.us11.list-manage.com/subscribe/post?u=b59cd34816a376a0c58945aee&amp;id=2e74fec4e5" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div id="mc_embed_signup_scroll">
            <label for="mce-EMAIL">Subscribe to our mailing list</label>
            <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
            <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
            <div style="position: absolute; left: -5000px;">
                <input type="text" name="b_b59cd34816a376a0c58945aee_2e74fec4e5" tabindex="-1" value="">
            </div>
            <div class="clear">
                <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
            </div>
        </div>
    </form>
</div>

此外，这看起来很丑陋:

style="position: absolute; left: -5000px;"

为什么你不使用隐藏输入或“显示:无”？ :)