如何将 Mailchimp 注册表单居中 div？

Question

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

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

我认为这些问题缺少的是表单代码和包含的样式代码（见下文）。我如何才能将内容（文本）和 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>

你可以看到我已经尝试了标签以及更改表单中的 class..

非常感谢任何帮助:3

Answer 1

您正在使用 bootstrap。那么如何将该代码包装在 bootstrap 的网格系统中呢？

#mc_embed_signup {
  background: #fff;
  clear: left;
  font: 14px Helvetica, Arial, sans-serif;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-6">
      <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><br />
              <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>
      </center>
    </div>
    <div class="col-md-3"></div>
  </div>
</div>

Answer 2

本文可能对您有所帮助：Customize Your Own MailChimp E-Mail Newsletter Signup Form。

/** MailChimp Styles **/

#mc_embed_signup {
  background: #fff;
  clear: left;
  font: 14px Helvetica, Arial, sans-serif;
  text-align: center;
  width: 350px;
  margin: 0 auto;
}
/* MailChimp Form Embed Code - Slim - 08/17/2011 */

#mc_embed_signup form {
  display: block;
  position: relative;
  text-align: center;
  padding: 10px 0 10px 3%;
}
#mc_embed_signup h2 {
  font-weight: bold;
  padding: 0;
  margin: 15px 0;
  font-size: 1.4em;
}
#mc_embed_signup input {
  border: 1px solid #ababab;
  -webkit-appearance: none;
}
#mc_embed_signup input[type=checkbox] {
  -webkit-appearance: checkbox;
}
#mc_embed_signup input[type=radio] {
  -webkit-appearance: radio;
}
#mc_embed_signup input:focus {
  border-color: #799877;
}
#mc_embed_signup .button {
  display: block;
  position: relative;
  background-color: #266080;
  padding: 0;
  margin: 0 auto;
  border: 0 none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  width: 140px;
  height: 36px;
  line-height: 36px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  vertical-align: top;
}
#mc_embed_signup .button:hover {
  background-color: #f00;
}
#mc_embed_signup .button:active {
  top: 2px;
  border-bottom-width: 1px;
}
#mc_embed_signup .small-meta {
  font-size: 11px;
}
#mc_embed_signup .nowrap {
  white-space: nowrap;
}
#mc_embed_signup .clear {
  clear: none;
  display: inline;
}
#mc_embed_signup label {
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  padding-bottom: 7px;
  color: #616161;
  font-weight: bold;
}
#mc_embed_signup input.email {
  display: block;
  padding: 8px 4px;
  margin: 0 4% 10px 0;
  text-indent: 5px;
  color: #818181;
  font-size: 1.0em;
  background: #fff;
  font-weight: bold;
  width: 100%;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  transition: all 0.2s linear;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
#mc_embed_signup input.email:focus {
  color: #666;
}
#mc_embed_signup div#mce-responses {
  float: left;
  top: -1.4em;
  padding: 0em .5em 0em .5em;
  overflow: hidden;
  width: 90%;
  margin: 0 5%;
  clear: both;
}
#mc_embed_signup div.response {
  margin: 1em 0;
  padding: 1em .5em .5em 0;
  font-weight: bold;
  float: left;
  top: -1.5em;
  z-index: 1;
  width: 80%;
}
#mc_embed_signup #mce-error-response {
  display: none;
}
#mc_embed_signup #mce-success-response {
  color: #529214;
  display: none;
}
#mc_embed_signup label.error {
  display: block;
  float: none;
  width: auto;
  margin-left: 1.05em;
  text-align: left;
  padding: .5em 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div 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 form-control" 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>
</div>

Answer 3

首先 - 删除中心标签和这个 "class":

class="display:block margin:auto"

其次 - 您可以将输入宽度设置为 100%，将块宽度设置为 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;"

为什么你不使用隐藏输入或"display: none"？ :)

如何将 Mailchimp 注册表单居中 div？

How to center Mailchimp sign-up form div?

html

css

twitter-bootstrap

centering

mailchimp