Mein Button wird nicht mittig angezeigt
bearbeitet von Matthias ScharwiesServus!
Ich kann nur raten, was Du im Endeffekt machen willst. Hier ist ein Beispiel eines [Formulars mit zentriertem Absende-Button](http://www.jsr-hersbruck.de/apps/test-button.html).
Ich habe anstelle von float das neue [Grid layout ](http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/grid) verwendet.
Mein HTML:
~~~HTML
<form>
<fieldset class='n_l'>
Links
</fieldset>
<fieldset class='n_r'>
Rechts
</fieldset>
<button type="submit" id="sende_button">Senden!</button>
</form>
~~~
Anstelle der divs passen in einem Formular wohl eher fieldset-Elemente, evtl. eines für Login und eins für persönliche Daten.
Das CSS:
~~~CSS
form {
display: grid;
grid-template-columns: repeat(2 1fr);
grid-template-areas: "left right"
"button button";
}
.n_l {
grid-area: left;
border-right: 1px solid #000000;
padding:10px;
background: red;
}
.n_r {
grid-area: right;
padding:10px;
background: green;
}
button {
grid-area: button;
width: 10em;
justify-self: center;
}
~~~
Das form-Element enthält display:grid und eine [grid-template-area](http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Layout_mit_Grid#Rasterbereiche). Die fieldsets teilen sich auch 2 gleichbreite spalten auf.
Der Button verteilt sich über beide Spalten, ist aber nur 10em breit und wird mit [justify-self](http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/grid/Ausrichtung_von_Grid_Items#justify-self) zentriert.
>
>
> Herzliche Grüße
>
> Matthias Scharwies
>
>
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun:
*[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}