Mein Button wird nicht mittig angezeigt

[Matthias Scharwies]

Servus!

Ich kann nur raten, was Du im Endeffekt machen willst. Hier ist ein Beispiel eines Formulars mit zentriertem Absende-Button.

Ich habe anstelle von float das neue Grid layout verwendet.

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

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

Herzliche Grüße

Matthias Scharwies

Herzliche Grüße

Matthias Scharwies