[ERLEDIGT] Input und Button nebeneinander im div positionieren

[maniaco94]

Hallo zusammen,

als Arbeitsbeispiel bin ich dabei eine Landingpage zu Programmieren.
Leider komme ich nicht weiter per der Positionierung von zwei Elementen (input und button) die zur Eingabe der Emailadresse dienen.

    <style>
.container {
    margin-left: auto;
    margin-right: auto;
}

.col-15 {
    width: 15%;
    float: left;
}

.col-70 {
    width: 70%;
    float: left;
}
.newsletter input button {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
</style>

<div class="container">
    <div class="col-15"><p>#</p></div>
    <div class="col-70">
        <form class="newsletter">
            <input type="email" placeholder="enter">
            <button tye="submit">submit</button>
        </form>
    </div>
    <div class="col-15"><p>#</p></div>
</div>

Ich möchte gerne input type="email" und button nebeneinander stehen haben und im div col-70 zentriert haben.
Jetzt habe ich es hinbekommen, dass die Elemente input und button nebeneinander stehen, jedoch stehen diese nun im div linksbündig.

Wie kann ich es jetzt schaffen, dass beide Elemente zusammen zentriert im div stehen?


Liebe Grüße
Anne

P.S.: falls das Thema schon mal so aufgekommen ist, habe ich dies leider hier nicht gefunden und bitte um entschuldigung

 

[MrMurphy]

Hallo

Jetzt habe ich es hinbekommen, dass die Elemente input und button nebeneinander stehen, jedoch stehen diese nun im div linksbündig.

Das verstehe ich nicht. Die beiden Elemente stehen immer linksbünding nebeneinander. Du musst vorher also ein CSS verwendet haben, dass etwas anderes bestimmt hat.

.newsletter input button {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Diese Angaben haben in deinem Quelltext zum Beispiel überhaupt keine Auswirkungen, die kannst du also auch löschen.

Statt dessen könntest du zum Beispiel Flexbox benutzen, indem du folgende CSS-Anweisungen hinzufügst:

      .newsletter {
         display: flex;
         justify-content: center;
      }

Gruss

MrMurphy

 

[maniaco94]

Wow, vielen Dank für die schnelle Hilfe!
Es hat funktioniert!

Wo liegt denn der Unterschied Elemente zu zentieren mit

.x1 {
display: block;
margin-left: auto;
margin-right: auto;
}

und

.x2 {
display: flex;
justify-content: center;
}

Zum Beispiel hat x1 bei images funktioniert, diese im div zu zentrieren oder muss man für images und forms andere Befehle nutzen?

 

[MrMurphy]

Hallo

Wo liegt denn der Unterschied Elemente zu zentieren

Das sind zwei unabhängige Lösungen für zwei vollkommen unterschiedliche Aufgaben.

.x1 {
display: block;
margin-left: auto;
margin-right: auto;
}

Damit werden die Elemente selbst jeweils für zentriert, sofern sie schmaler als das umgebende Element sind.

Durch display: block stehen sie selbst aber grundsätzlich jeweils in einer eigenen Zeile, also untereinander.

.x2 {
display: flex;
justify-content: center;
}

Damit wird der Inhalt des betroffenen Containers zentriert, nicht der Container selbst.

Gruss

MrMurphy

 

[maniaco94]

Vielen Dank, dass hat echt geholfen! :)