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

仅添加以下css以垂直对齐表单组件，这将解决您的问题。

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

Answer 2

vertical align: middle可以解决问题。

＆＃13;

#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 */
}

＆＃13;

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

＆＃13;

Answer 3

另一个变体是向表单添加display flex，因为表单的子元素不是 #newletter-wrap 的flex元素：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

您正在使用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>

Flexbox未将所有项目垂直对齐

4 个答案: