包装中的中心表格[重复]

Posted

技术标签:

【中文标题】包装中的中心表格[重复]【英文标题】：Center form in wrapper [duplicate] 【发布时间】：2018-07-31 16:06:19 【问题描述】：

我一直试图将以下表单放在包装器中，但它似乎不起作用。我做错了什么？

在这里调琴：https://jsfiddle.net/wk40kdg5/2/。

HTML

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,700,400italic">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Josefin+Slab:400,700">
<div class="row">
  <div class="col-md-12 centered">
    <div class="newsletter">
      <div class="wrapper">
        <form id="mc-embedded-subscribe-form" method="post" name="mc-embedded-subscribe-form" target="_blank">
          <div class="newsletter--form">
            <div class="input-group">
              <label class="newsletter__label hidden-label" for="Email">Join our Family For Updates</label> &nbsp;
              <input class="input-group-field newsletter__input" id="Email" name="EMAIL" placeholder="Email Address" type="email" value=""> &nbsp;
              <span class="input-group-btn">
                  <button type="submit" class="btn newsletter__submit" name="subscribe" id="Subscribe">
                    <span class="newsletter__submit-text--large">SUBSCRIBE</span>
              <span class="newsletter__submit-text--small">
                      <span class="icon icon-arrow-right" aria-hidden="true"></span>
              </span>
              </button>
              </span>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

CSS

.newsletter 
  background: none;


.newsletter form 
  max-width: 720px;


.newsletter .newsletter__label 
  display: inline-block;
  font-family: 'Josefin Slab' !important;
  font-size: 18px;
  font-style: normal;
  height: 25px;
  line-height: 25px;
  padding: 2px 0;
  position: static;
  text-transform: uppercase;
  vertical-align: top;
  width: auto;
  letter-spacing: 1px;


.newsletter .newsletter__input 
  border: none;
  border-bottom: 1px solid #000;
  color: #000;
  font-size: 17px;
  font-style: normal;
  margin-left: 5px;
  margin-right: 5px;
  padding: 0;
  vertical-align: bottom;
  width: 250px;
  text-transform: uppercase;
  font-family: Ubuntu !important;
  padding: 2px 0;


.newsletter .newsletter__input:not(:root:root) 
  padding: 0;


.input-group-field,
.input-group-btn 
  vertical-align: bottom;
  width: auto;
  padding-top: 5px;


.newsletter .input-group .btn,
.newsletter .input-group .btn--secondary,
.newsletter .input-group .input-group-field 
  font-family: Ubuntu !important;


.newsletter .input-group .input-group-field 
  font-family: Ubuntu !important;
  height: 25px;
  letter-spacing: 1px;


.newsletter .input-group .input-group-field:focus 
  outline: none;


.newsletter .input-group .btn 
  border: medium none;
  line-height: normal !important;
  padding: 0 12px !important;
  vertical-align: top;
  height: 20px;
  margin: 0;
  width: auto;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
  font-family: 'Ubuntu', sans-serif;
  cursor: pointer;
  border: 1px solid transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 0;
  background-color: #1c1d1d;
  color: #fff;
  -webkit-transition: background-color 0.15s ease-out;
  -moz-transition: background-color 0.15s ease-out;
  -ms-transition: background-color 0.15s ease-out;
  -o-transition: background-color 0.15s ease-out;
  transition: background-color 0.15s ease-out;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 13px !important;


.newsletter .input-group .btn:hover 
  opacity: 0.8;


.newsletter .newsletter__input::-webkit-input-placeholder 
  color: #cbcbcb;
  opacity: 0.5;


.newsletter .newsletter__input:-moz-placeholder 
  color: #cbcbcb;
  opacity: 0.5;


.newsletter .newsletter__input::-moz-placeholder 
  color: #cbcbcb;
  opacity: 0.5;


.newsletter .newsletter__input:-ms-input-placeholder 
  color: #cbcbcb;
  opacity: 0.5;


.newsletter .newsletter__input::-ms-input-placeholder 
  color: #cbcbcb;
  opacity: 0.5;


.newsletter .input-group-field,
.newsletter .input-group-btn 
  display: inline-block;
  vertical-align: top;

【问题讨论】：

抱歉没说清楚，我的意思是整个表格 @methuselah，尝试添加 .newsletter--form text-align: center; 【参考方案1】：

您应该向表单元素添加宽度而不是最大宽度，可以是固定的，也可以是百分比。还需要添加 'margin: auto'

例如：

.newsletter form
   width: 30%;
   margin: auto;

【讨论】：

为什么是宽度而不是最大宽度？【参考方案2】：

将margin:auto 添加到您的表单标签将解决您想要的问题。

.newsletter 
  background: none;


.newsletter form 
  max-width: 720px;


.newsletter .newsletter__label 
  display: inline-block;
  font-family: 'Josefin Slab' !important;
  font-size: 18px;
  font-style: normal;
  height: 25px;
  line-height: 25px;
  padding: 2px 0;
  position: static;
  text-transform: uppercase;
  vertical-align: top;
  width: auto;
  letter-spacing: 1px;


.newsletter .newsletter__input 
  border: none;
  border-bottom: 1px solid #000;
  color: #000;
  font-size: 17px;
  font-style: normal;
  margin-left: 5px;
  margin-right: 5px;
  padding: 0;
  vertical-align: bottom;
  width: 250px;
  text-transform: uppercase;
  font-family: Ubuntu !important;
  padding: 2px 0;


.newsletter .newsletter__input:not(:root:root) 
  padding: 0;


.input-group-field,
.input-group-btn 
  vertical-align: bottom;
  width: auto;
  padding-top: 5px;


.newsletter .input-group .btn,
.newsletter .input-group .btn--secondary,
.newsletter .input-group .input-group-field 
  font-family: Ubuntu !important;


.newsletter .input-group .input-group-field 
  font-family: Ubuntu !important;
  height: 25px;
  letter-spacing: 1px;


.newsletter .input-group .input-group-field:focus 
  outline: none;


.newsletter .input-group .btn 
  border: medium none;
  line-height: normal !important;
  padding: 0 12px !important;
  vertical-align: top;
  height: 20px;
  margin: 0;
  width: auto;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
  font-family: 'Ubuntu', sans-serif;
  cursor: pointer;
  border: 1px solid transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 0;
  background-color: #1c1d1d;
  color: #fff;
  -webkit-transition: background-color 0.15s ease-out;
  -moz-transition: background-color 0.15s ease-out;
  -ms-transition: background-color 0.15s ease-out;
  -o-transition: background-color 0.15s ease-out;
  transition: background-color 0.15s ease-out;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 13px !important;


.newsletter .input-group .btn:hover 
  opacity: 0.8;


.newsletter .newsletter__input::-webkit-input-placeholder 
  color: #cbcbcb;
  opacity: 0.5;


.newsletter .newsletter__input:-moz-placeholder 
  color: #cbcbcb;
  opacity: 0.5;


.newsletter .newsletter__input::-moz-placeholder 
  color: #cbcbcb;
  opacity: 0.5;


.newsletter .newsletter__input:-ms-input-placeholder 
  color: #cbcbcb;
  opacity: 0.5;


.newsletter .newsletter__input::-ms-input-placeholder 
  color: #cbcbcb;
  opacity: 0.5;


.newsletter .input-group-field,
.newsletter .input-group-btn 
  display: inline-block;
  vertical-align: top;

#mc-embedded-subscribe-form 
  margin:auto

  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,700,400italic">
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Josefin+Slab:400,700">
<div class="row">
  <div class="col-md-12 centered">
    <div class="newsletter">
      <div class="wrapper">
        <form id="mc-embedded-subscribe-form" method="post" name="mc-embedded-subscribe-form" target="_blank">
          <div class="newsletter--form">
            <div class="input-group">
              <label class="newsletter__label hidden-label" for="Email">Join our Family For Updates</label> &nbsp;
              <input class="input-group-field newsletter__input" id="Email" name="EMAIL" placeholder="Email Address" type="email" value=""> &nbsp;
              <span class="input-group-btn">
                  <button type="submit" class="btn newsletter__submit" name="subscribe" id="Subscribe">
                    <span class="newsletter__submit-text--large">SUBSCRIBE</span>
              <span class="newsletter__submit-text--small">
                      <span class="icon icon-arrow-right" aria-hidden="true"></span>
              </span>
              </button>
              </span>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

【讨论】：

【参考方案3】：

在表单声明中添加自动边距：

.newsletter form 
  max-width: 720px;
  margin: auto;

【讨论】：

以上是关于包装中的中心表格[重复]的主要内容，如果未能解决你的问题，请参考以下文章

Bootstrap 3：中心块不适用于最大宽度[重复]

在类型提示时使用 JAVA 中的包装类 [重复]

删除表头时，表格单元格中的中心输入字段

JavaScript正则表达式 - 上标所有数字[重复]

如何在 Mongoose（MongoDB 包装器）中删除一行 [重复]

删除表格中的重复单元格