Flexbox不将所有项目垂直对齐

Question

I'm trying to get everything to be centered inside this grey div . I have Used flexbox which I thought work but then the other content is not slightly in the center except the text - the input form and button are not vertically centered. I assume it could be an external mail chimp styling issue.

Also, I want to control the width of the input box to be a percentage, but it will not allow. However, fixed works.

Why is it not aligning vertically centered? And why can't I set a percentage width of the box?

 #newsletter-wrap { width: 100%; height: 100px; background: lightgrey; float: left; display: flex; justify-content: center; align-items: center; font-size: 45px; font-weight: 300; } #newsletter-wrap > *, #newsletter-wrap > form > * { display: inline; padding: 0; margin: 0; } #newsletter-button { display: inline; } #mce-EMAIL { background: pink; width: 300px; /* want to make it %, not fixed */ } 

  <section id="newsletter-wrap"> Problem. <form action="https://outsetweb.us17.list-manage.com/subscribe/post?u=8c38151fa33f984127db5705c&amp;id=4c741659e1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <input type="email" placeholder="email" value="" name="EMAIL" class="required email" id="mce-EMAIL"> <div id="mce-responses"> <div class="response" id="mce-error-response" style="display:none"></div> <div class="response" id="mce-success-response" style="display:none"></div> </div> <input type="submit" value="Subscribe" name="subscribe" id="newsletter-button"> </form> </section> 

Answer 1

Add just the following css to align form component vertically, This will solve your issue.

#mc-embedded-subscribe-form{
 vertical-align: middle;
}

Answer 2

vertical align: middle would do the trick.

 #newsletter-wrap { width: 100%; height: 100px; background: lightgrey; float: left; display: flex; justify-content: center; align-items: center; font-size: 45px; font-weight: 300; } #newsletter-wrap>*, #newsletter-wrap>form>* { display: inline; padding: 0; margin: 0; vertical-align: middle; } #newsletter-button { display: inline; } #mce-EMAIL { background: pink; width: 50%; /* want to make it %, not fixed */ } 

 <section id="newsletter-wrap"> Problem. <form action="https://outsetweb.us17.list-manage.com/subscribe/post?u=8c38151fa33f984127db5705c&amp;id=4c741659e1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <input type="email" placeholder="email" value="" name="EMAIL" class="required email" id="mce-EMAIL"> <div id="mce-responses"> <div class="response" id="mce-error-response" style="display:none"></div> <div class="response" id="mce-success-response" style="display:none"></div> </div> <input type="submit" value="Subscribe" name="subscribe" id="newsletter-button"> </form> </section> 

Answer 3

One more variant is to add display flex to the form, because form's child elements is not flex elements towards #newsletter-wrap :

 #newsletter-wrap { width: 100%; height: 100px; background: lightgrey; float: left; display: flex; justify-content: center; align-items: center; font-size: 45px; font-weight: 300; } #newsletter-wrap > *, #newsletter-wrap > form > * { display: inline; padding: 0; margin: 0; } #newsletter-button { display: inline; } #mce-EMAIL { background: pink; width: 300px; /* want to make it %, not fixed */ } #mc-embedded-subscribe-form { display: flex; } 

  <section id="newsletter-wrap"> Problem. <form action="https://outsetweb.us17.list-manage.com/subscribe/post?u=8c38151fa33f984127db5705c&amp;id=4c741659e1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <input type="email" placeholder="email" value="" name="EMAIL" class="required email" id="mce-EMAIL"> <div id="mce-responses"> <div class="response" id="mce-error-response" style="display:none"></div> <div class="response" id="mce-success-response" style="display:none"></div> </div> <input type="submit" value="Subscribe" name="subscribe" id="newsletter-button"> </form> </section> 

Answer 4

You are using flex to #newsletter-wrap in that case float: left; is not needed. You applied flex to the #newsletter-wrap so the properties will be applied only to its children not the elements inside the child. As far as I know vertical-align: middle; is a property related to Table-cell . It will work but as you are using flex you should only use the properties related to it.

 #newsletter-wrap { width: 100%; height: 100px; background: lightgrey; display: flex; justify-content: center; align-items: center; font-size: 45px; font-weight: 300; } form { display: flex; align-items: center; } #newsletter-button { display: inline; } #mce-EMAIL { background: pink; width: 100%; } 

 <section id="newsletter-wrap"> Problem. <form action="https://outsetweb.us17.list-manage.com/subscribe/post?u=8c38151fa33f984127db5705c&amp;id=4c741659e1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <input type="email" placeholder="email" value="" name="EMAIL" class="required email" id="mce-EMAIL"> <div id="mce-responses"> <div class="response" id="mce-error-response" style="display:none"></div> <div class="response" id="mce-success-response" style="display:none"></div> </div> <input type="submit" value="Subscribe" name="subscribe" id="newsletter-button"> </form> </section>