如何使该部分与表格居中。表单域和按钮未居中

Question

我需要文本居中在该部分的中间，并且字段和按钮在该文本下对齐（字段和按钮并排保持。）一切都很好 - 字段和按钮当前彼此并排它应该是这样的，但只是它没有正确居中。文本居中，但表单字段和按钮搞砸了。我附上了一张图片。我正在使用 HTML5、CSS3 和引导程序。

<section class="more-products">
<div class="container">
<div class="row">         
<div class=" col-lg-8 col-md-4 col-sm-4 prod-form">

<p class="par-headform"> TEXT</p>
<p class="para-form">
                  text about products
</p>
<p class="para-blue">

     Sign up for the newsletter Stay informed
</p>  

<form class="subscribe_group wow fadeInUp row col-m-12">
<div class=" col-md-6 col-sm-6 col-xs-5 ">
<input class="form-control subscribe_mail" type="email" placeholder="email">
</div>
<div class="col-md-5 col-sm-6 col-xs-5 "   >
<input class="btn-form" type="submit" value="Subscribe">
</div>

</form>
</div>
</div>
</div>
</section>

CSS

.more-products {
padding: 60px 0;
background: #FCFCFC;
text-align: center;
}

.more-products  .block {
position: relative;
z-index: 99;
}

.more-products .par-headform  .block {
padding: 20px 15px;
margin-top: 0;
color: #666;
}

.prod-form .btn-form {
border: 1px solid #00bfff;
background-color: #fff;
color: #00bfff;
padding: 3% 14%;
font-weight: 500;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0.2s;
border: 1px solid #00bfff;
background-color: #fff;
letter-spacing: .8px;
font-size: 120%; 
display: inline-block; 
}

.prod-form .btn-form: Hover{
color: #00bfff;
padding: 3% 14%;
font-weight: 500;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0.2s;
border: 1px solid #00bfff;
background-color: #fff;
letter-spacing: .8px;
font-size: 120%; 
display: inline-block; 
}

.par-headform {
font-size: 250%;
line-height: 35px;
}

.form-control {
max-width: auto;
margin: 1px;
}

Answer 1

试试这个：

<form class="subscribe_group wow fadeInUp row col-m-12">
  <div class="col-lg-8 col-md-4 col-sm-4 center1">
    <input class="form-control subscribe_mail" type="email" placeholder="email">
    <input class="btn-form" type="submit" value="Subscribe">
  </div>
</form>

我删除了两个输入元素周围的 DIV 标签（将它们放在 one 包装器中），为父 DIV 提供了与它上面的文本的 DIV 相同的类，并添加了一个额外的类 @ 987654322@，您必须将其放入您的 CSS 中，例如

.center1 {
  text-align: center;
}

输入元素需要定义为内联块，如果它们还没有的话：

.subscribe_mail, .btn-form {
  display: inline-block;
}

由于您没有小提琴或 codepen，我无法尝试，但它应该可以工作 - 也许输入标签周围的 DIV 中的类需要不同，这取决于您的其余代码。

Answer 2

对表单和表单内的 div 使用以下 css。

form {
 width: auto;
 display: inline-table;
}

form > div {
 margin: 0 auto;
 float: left;
}

并将订阅填充更改为 px 而不是 % ，如下例所示

.prod-form .btn-form {
  padding: 3px 6px;
}

更新 使用以下 css 到该部分

section {
      position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

检查 jsfiddle https://jsfiddle.net/s45wgw1h/1/