versucht, das Anmeldeformular in der Mitte der Fußzeile

Question

Ich versuche, zu zentrieren das Anmeldeformular in der Fußzeile zu bekommen genau in der Mitte der Fußzeile zentriert werden; zwischen der linken und rechten Seite der Fußzeile. Es ist zu weit auf der linken Seite, wenn ich versuche, die push, pull oder offset Klassen zu verwenden. Es scheint nur ein wenig zu weit in eine Richtung zu gehen. Ich benutze html5, css3 und bootstrap 3. Oben habe ich ein Bild von dem angebracht, wie ich es gerne aussehen würde.

<footer class="footer-distributed"> 
    <div class="footer-left"> 
    <h3>Menu</h3> 
    <p class="footer-links"> 
     <a href="#">text</a> • 
     <a href="#"> text </a> • 
     <a href="#"> text </a> • 
     <a href="#"> text </a> • 
     <a href="#"> text </a> 
    </p> 

    <p class="footer-company-name"> <a href="http://www.hellohello.com">hellohello</a><span> &copy; 2016</span></p> 

    <div class="footer-social"> 
     <!-- Social Media --> 
     <ul class="social"> 
     <li> 
      <a href="http://wwww.fb.com/hellohello" class="Facebook"> 
      <i class="ion-social-facebook"></i> 
      </a> 
     </li> 
     <li> 
      <a href="http://wwww.twitter.com/ hellohello " class="Twitter"> 
      <i class="ion-social-twitter"></i> 
      </a> 
     </li> 
     <li> 
      <a href="#" class="Linkedin"> 
      <i class="ion-social-linkedin"></i> 
      </a> 
     </li> 
     <li> 
      <a href="http://wwww.fb.com/ hellohello " class="Google Plus"> 
      <i class="ion-social-googleplus"></i> 
      </a> 
     </li> 
     </ul> 
    </div> 
    </div> 

    <div class="col-md-6 col-sm-6 col-xs-12 col-sm-push-center "> 
    <div class=" subscribe-foot section-wrapper"> 
     <p class="subscribe-nowfoot"> 
     Sign up for our newsletter to stay hellohello informed 
     <br>about new products, updates and discounts 
     </p> 

     <div class="col-md-8 col-sm-8 col-xs-12 col-sm-push-2"> 
     <div class="input-group"> 
      <input type="email" class="form-control border-radius" placeholder="Email address"> 
      <span class="input-group-btn"> 
    <button class="btn btn-form border-radius custom-sub-btn" type="button">Sign up</button> 
    </span> 
     </div> 
     <!-- /input-group --> 
     </div> 
    </div> 
    </div> 

    <div class="footer-right"> 
    <p>Contact Us</p> 
    <form action="#" method="post"> 
     <input type="text" name="email" placeholder="Email" /> 
     <textarea name="message" placeholder="Message"></textarea> 
     <button>Send</button> 
    </form> 

    </div> 
</footer> 

CSS:

#footer { 
    background-color: #292c2f; 
} 

.footer-distributed { 
    background-color: #292c2f; 
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12); 
    box-sizing: border-box; 
    width: 100%; 
    font: bold 16px sans-serif; 
    text-align: left; 
    padding: 50px 60px 40px; 
    margin-top: 0px; 
    overflow: hidden; 
} 


/* Footer left */ 

.footer-distributed .footer-left { 
    float: left; 
} 


/* The company logo */ 

.footer-distributed h3 { 
    color: #bebebe; 
    font: normal 36px 'roboto', sans-serif; 
    margin: 0 0 10px; 
} 


/* Footer links */ 

.footer-distributed .footer-links { 
    color: #00bfff; 
    font-weight: 400; 
    margin: 0 0 10px; 
    padding: 0; 
} 

.footer-distributed .footer-links a { 
    display: inline-block; 
    line-height: 1.8; 
    text-decoration: none; 
    color: inherit; 
} 

.footer-distributed .footer-company-name { 
    color: #00bfff; 
    font-size: 14px; 
    font-weight: normal; 
    margin: 0; 
} 

.footer-distributed .footer-company-name span { 
    color: #d1d1d1; 
    font-size: 14px; 
    font-weight: normal; 
    margin: 0; 
} 

.footer-distributed .footer-company-name a { 
    color: #00bfff; 
} 

.footer-distributed .subscribe-nowfoot { 
    color: #eaeaea; 
    font-size: 16px; 
    line-height: 20px; 
    text-align: center; 
    margin-bottom: 20px; 
    font-weight: 300; 
    margin-left: 0px; 
    margin-right: 0px; 
    padding-right: 0px; 
    padding-left: 0px; 
} 

.footer-distributed .btn-form:hover, 
.footer-distributed .btn-form:active { 
    border: 1px solid #00bfff; 
    background-color: #fff; 
    color: #00bfff; 
} 

.footer-distributed .custom-sub-btn { 
    background-color: #00bfff; 
    color: #fff; 
    border-color: #00bfff; 
    transition: all .4s ease-in-out; 
    letter-spacing: 1px; 
    margin-top: 1px; 
} 

.footer-distributed .custom-sub-btn:hover { 
    color: #00bfff; 
    background: #fff; 
    border-color: #00bfff; 
    font-weight: 500; 
    letter-spacing: 1px; 
} 

.subscribe-foot { 
    text-align: center; 
    margin-top: 0px; 
    padding-top: 0px; 
} 


/* Footer Right */ 

.footer-distributed .footer-right { 
    float: right; 
} 

.footer-distributed .footer-right p { 
    text-align: center; 
    vertical-align: top; 
    margin: 0px 0px 20px 0; 
    color: #ffffff; 
    color: #bebebe; 
    font: normal 36px 'roboto', sans-serif; 
} 


/* The contact form */ 

.footer-distributed form { 
    display: inline-block; 
} 

.footer-distributed form input, 
.footer-distributed form textarea { 
    display: block; 
    border-radius: 3px; 
    box-sizing: border-box; 
    background-color: #fafafa; 
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1); 
    border: none; 
    resize: none; 
    font: inherit; 
    font-size: 14px; 
    font-weight: normal; 
    color: #969696; 
    width: 280px; 
    padding: 18px; 
} 

.footer-distributed::-webkit-input-placeholder { 
    color: #5c666b; 
} 

.footer-distributed::-moz-placeholder { 
    color: #00aaff; 
    opacity: 1; 
} 

.footer-distributed:-ms-input-placeholder { 
    color: #00aaff; 
} 

.footer-distributed form input { 
    height: 20px; 
    margin-bottom: 15px; 
} 

.footer-distributed form textarea { 
    height: 75px; 
    margin-bottom: 20px; 
} 

.footer-distributed form button { 
    border-radius: 3px; 
    background-color: #00bbff; 
    color: #ffffff; 
    border: 0; 
    padding: 8px 50px; 
    font-weight: 500; 
    float: right; 
    letter-spacing: 1px; 
} 

.footer-distributed form button:hover { 
    border-radius: 3px; 
    background-color: #ffffff; 
    color: #00bbff; 
    border: 2px solid #00bfff; 
    padding: 8px 50px; 
    font-weight: 500; 
    float: right; 
    letter-spacing: 1px; 
} 

Answer 1

Es ist ein bisschen komisch, weil in der gleichen div sind Sie sowohl Ihre eigene Positionierung (durch .footer-left und .footer-right) und das Gittersystem von Bootstrap (für die Verwendung von anmelden div). Es ist besser (meiner Meinung nach), bei einem der beiden zu bleiben.

Erste Option, Bootstrap:

es zu tun Bootstrap verwenden, benötigen Sie:

• Um den Schwimmer von Ihrem css
• entfernen Sie die richtige Klasse hinzuzufügen für links/rechts:

So bleibt die CSS weitgehend unverändert (einfach den Schwimmer nach links und rechts entfernen) und der HTML hat einige Änderungen. Die wie folgt zusammengefasst werden können:

<div class="footer-left col-sm-3 col-xs-12"> 
    <!-- Menu --> 
</div> 
<div class="col-md-6 col-sm-6 col-xs-12"> 
    <!-- Sign up -->  
</div> 
<div class="footer-right col-sm-3 col-xs-12"> 
    <!-- Contact --> 
</div> 

Fiddle: https://jsfiddle.net/_Py_/3uybymtk/

Zweite Option, keine Bootstrap:

Ohne Bootstrap, würde ich mit flex empfehlen (https://css-tricks.com/snippets/css/a-guide-to-flexbox/ oder https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes für weitere Informationen siehe)

Um es in unserem Fall richtig zu verwenden, ist es ziemlich einfach:

• Entfernen Sie den Schwimmer nach links/rechts
• den Bootstrap-Code für das Zeichen entfernen up div
• hinzufügen die richtige CSS es flex zu machen.

So ist die html ist:

<div class="footer-left> 
    <!-- Menu --> 
</div> 
<div> 
    <!-- Sign up -->  
</div> 
<div class="footer-right"> 
    <!-- Contact --> 
</div> 

Und die CSS als solche geändert:

.footer-distributed { 
    background-color: #292c2f; 
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12); 
    box-sizing: border-box; 
    width: 100%; 
    font: bold 16px sans-serif; 
    text-align: left; 
    padding: 50px 60px 40px; 
    margin-top: 0px; 
    overflow: hidden; 
    display : flex; 
    justify-content : space-between; 
} 
.footer-distributed > div { 
    flex: 0 0 auto; 
} 
.footer-distributed .footer-left { 
} 
.footer-distributed .footer-right{ 
} 

Ich habe die Fußzeile links und Fußzeile rechts zu zeigen, dass sie jetzt nichts .

Dies funktioniert durch:

• die .footer-distributed in einem Flex-Display (display:flex)
• die Art und Weise Elemente in diesen flexiblen Behältern angezeigt ändern (justify-content : space-between wird das erste Element machen am Anfang zu sein, die Linie, die letzte am Ende der Linie, und der Rest gleichmäßig dazwischen, dh unser Anmeldediv wird zentriert!).
• Erklären der div, dass ein direkter Nachkomme von .footer-distributed sind, dass sie nicht wachsen/schrumpfen und dass ihre Basisgröße durch ihre Höhe/Breite bestimmt wird (flex: 0 0 auto;)

Fiddle: https://jsfiddle.net/_Py_/segk8mxt/