Bu bölümü formun merkeze nasıl getirilir. Form alanı ve düğmesi,

Question

'u merkezlemiyor. Bölümün ortasına ortalanacak metne ve alana ve bu metnin altına geçmek için düğmeye (alan ve düğmeler yan yana kalacak şekilde) ihtiyacım var. Her şey iyi - Alan ve düğme şu anda olması gerektiği gibi yan yana, ama sadece düzgün bir şekilde merkezleme değil. Metin ortalanır, ancak form alanı ve düğmesi berbattır. Bir resim ekledim. HTML5, CSS3 ve bootstrap kullanıyorum.

<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 içinde formu ve div'lerden için aşağıdaki css kullanın.

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

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

ve değişim

bölümüne aşağıdaki css kullanmak Örneğin aşağıda

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

GÜNCELLEME gibi yerine%

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

çek px için dolgu abone jsfiddle https://jsfiddle.net/s45wgw1h/1/

Answer 2

Bu deneyin:

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

I (bir sargı onları için) iki girdi elemanının çevresinde DIV etiketleri çıkarıldı, yukarıda metinlerinin DIV olarak üst div aynı sınıfları verdi ve ilave

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

012: henüz değilse eğer, elementler ihtiyaç giriş inline-blokları olarak tanımlanacak

.center1 { 
    text-align: center; 
} 

gibi CSS içine koymak zorunda ek sınıf center1,

Bir keman veya kod yazıcınız olmadığından, bunu deneyemiyorum, ancak işe yaramalı - belki giriş etiketlerinin çevresindeki DIV sınıflarının farklı olması gerekir, bu kodunuzun geri kalanına bağlıdır.