Flexbox nicht alle Elemente vertikal ausrichten

Ich versuche, alles in diesem grauen div zentriert zu bekommen. Ich habe Flexbox verwendet, die ich dachte, aber dann funktioniert der andere Inhalt nicht leicht in der Mitte außer dem Text - das Eingabeformular und die Schaltfläche sind nicht vertikal zentriert. Ich nehme an, dass es sich um ein externes Mail-Chimp-Styling-Problem handeln könnte.Flexbox nicht alle Elemente vertikal ausrichten

Auch ich möchte die Breite der Eingabebox als Prozentsatz zu steuern, aber es wird nicht zulassen. Allerdings funktioniert das behoben.

Warum wird nicht vertikal zentriert ausgerichtet? Und warum kann ich keine prozentuale Breite der Box einstellen?

#newsletter-wrap { 
 
    width: 100%; 
 
    height: 100px; 
 
    background: lightgrey; 
 
    float: left; 
 
    display: flex; 
 
\t justify-content: center; 
 
\t 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> 
 
\t <input type="email" placeholder="email" value="" name="EMAIL" class="required email" id="mce-EMAIL"> 
 
<div id="mce-responses"> 
 
\t \t <div class="response" id="mce-error-response" style="display:none"></div> 
 
\t \t <div class="response" id="mce-success-response" style="display:none"></div> 
 
\t </div> 
 
\t <input type="submit" value="Subscribe" name="subscribe" id="newsletter-button"> 
 
</form> 
 
    
 
    </section>

Quelle

2017-10-30 user8758206

nur klar sein - der Text selbst vertikal zentral ist, aber nicht die anderen Elemente – user8758206

Sie verwenden fl ex zu #newsletter-wrap in diesem Fall float: left; wird nicht benötigt. Sie haben flex auf die #newsletter-wrap angewendet, sodass die Eigenschaften nur auf die untergeordneten Elemente und nicht auf die Elemente im untergeordneten Element angewendet werden. Soweit ich weiß, ist vertical-align: middle; eine Eigenschaft, die sich auf Table-cell bezieht. Es funktioniert, aber wie Sie Flex verwenden, sollten Sie nur die Eigenschaften verwenden, die damit verbunden sind.

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

Quelle

2017-10-30 11:59:32

Fügen Sie einfach die folgende CSS-Form Komponente vertikal auszurichten, wird Ihr Problem lösen.

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

Quelle

2017-10-30 11:32:10

Dank, auch, warum nicht kontrollieren kann ich die Breite der E-Mail-Box als Prozentsatz? es funktioniert, wenn ich eine feste Breite eingeben, aber ich würde es vorziehen, einen Prozentsatz zu verwenden – user8758206

@ user8758206, Denken Sie daran, Prozentsatz funktioniert/Breite der Elemente wie pro direkten Eltern Breite anpassen, können Sie auch Medienabfrage versuchen, Breite bei unterschiedlicher Auflösung zu ändern. –

vertical align: middle würde den Trick tun.

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

Quelle

2017-10-30 11:32:46

vielen Dank. Auch warum kann die E-Mail-Boxbreite nicht als feste Breite, sondern als Prozentsatz gesteuert werden? ID lieber eine% – user8758206

Ich sehe kein Problem mit%. Siehe meine aktualisierte Antwort. –

Sie haben 50% eingegeben aber es ist nicht 50% breit – user8758206

Eine weitere Variante ist Anzeige flex auf die Form an, weil Kinderformelemente nicht flex Elemente in Richtung # Newsletter-wrap ist:

#newsletter-wrap { width: 100%; height: 100px; background: lightgrey; float: left; display: flex; \t justify-content: center; \t 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&id=4c741659e1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> \t <input type="email" placeholder="email" value="" name="EMAIL" class="required email" id="mce-EMAIL"> <div id="mce-responses"> \t \t <div class="response" id="mce-error-response" style="display:none"></div> \t \t <div class="response" id="mce-success-response" style="display:none"></div> \t </div> \t <input type="submit" value="Subscribe" name="subscribe" id="newsletter-button"> </form> </section>

Quelle

2017-10-30 11:52:19

Flexbox nicht alle Elemente vertikal ausrichten

Antwort

Verwandte Themen