Position von Form in html ändern?

Hey, ich hab absolout keine ahnung von Web Design etc. und habe mir deshalb ein Template für Ein Login-System runtergeladen. Ich bin mit dem Design soweit zufreiden, bis auf das die gesamte Login-Form links am rand ist (siehe Bilder) (Ich hätte sie lieber in der mitte).

Kann mir jmd. erklären wie ich die Form in die Mitte bekomme, oder den code sogar schon passend für mich editieren? :) (Der HTML Teil ist ganz unten, ich hab den PHP Teil aber auch noch mit kopiert weil ich nicht weiß was man davon braucht.)

Danke im Voraus!

Link zum Code: https://pastebin.com/AYFpvhKb

Answer 1

[PWolff]

Umgib die Form mit einer <div> mit align="center" oder gib ihr eine Klasse mit align:center;

oder weise dieses Stilattribut der umgebenden div bzw. ihrer Klasse (also wrapper) zu (zusätzlich oder anstelle von text-align: center)

Siehe https://www.w3schools.com/tags/att_div_align.asp

Woher ich das weiß: Berufserfahrung – Software-Entwickler

Comments

[regex9]

Das align-Attribut ist schon seit etlichen Jahren obsolet und sollte daher nicht mehr verwendet werden, zumal es ja eh keine gute Praxis ist, die Positionierung mit HTML zu lösen.

[PWolff]

@regex9

Hatte ich auch in Erinnerung und dachte, es müsse irgendwie anders heißen, hab aber nochmal nachgesehen - entweder w3schools oder Google sollte wohl mal auffrischen

[regex9]

@PWolff

W3Schools erwähnt es, wenn auch nicht am Anfang der Seite.

Answer 2

[PhotonX]

Ersetze

<div class="wrapper">

mit zum Beispiel

<div class="wrapper" style="margin: auto; width: 33%;">

Quelle: https://www.w3schools.com/css/css_align.asp

Answer 3

[Dory1]

Entweder über CSS

.wrapper {
    width: 350px;
    padding: 20px;
    text-align: center;
    margin: 0 auto;        /* <------- diese Zeile einfügen */
}

oder nur für diese eine Form direkt im HTML:

<div class="wrapper" style="margin: 0 auto;">