html - Flexbox 没有将所有元素垂直居中对齐

Question

我试图让所有内容都集中在这个灰色的 div 中。我使用了我认为有效的 flexbox，但是除了文本之外其他内容并没有稍微居中 - 输入表单和按钮没有垂直居中。我认为这可能是外部邮件黑猩猩样式问题。

还有，我想把输入框的宽度控制成百分比，但是也不行。但是，固定工作。

为什么不是垂直居中对齐？为什么我不能设置框的百分比宽度？

#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

你正在使用 flex 来 #newsletter-wrap 在这种情况下 float: left; 是不需要的。您将 flex 应用于 #newsletter-wrap，因此属性将仅应用于其子元素，而不是子元素中的元素。据我所知，vertical-align: middle; 是一个与Table-cell相关的属性。它会起作用，但是当您使用 flex 时，您应该只使用与其相关的属性。

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