Behalten Sie das Formular zentriert, aber unveränderlich

Question

Ich versuche, ein Formular zentriert auf dem Bildschirm zu halten, aber wenn ich zusätzlichen Text wie eine Fehlermeldung hinzufüge, verschiebt das ganze Eingabefeld, um den Fehlertext auch zu zentrieren. Ich möchte nur das Formular Textfeld zentriert und alles nach nur auf der rechten Seite hinzugefügt.

Beispielcode:

<div style="width:60%; text-align: center; background-color: #70b08e; margin: 0 auto;"> 
     <span class="error">*Required feild</span> 
     <br><br> 
     <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"> 
     <label for="name">User name:</label><input type="text" name="name" value="<?php echo $name;?>" maxlength=255> 
     <span class="error">*<?php echo $nameErr;?></span> 
     <br><br> 
     <label for="email">E-Mail:</label><input type="text" name="email" value="<?php echo $email;?>" maxlength=255> 
     <span class="error">*<?php echo $emailErr;?></span> 
     <br><br> 
     <label for="password">Password:</label><input type="password" name="password"> 
     <span class="error">*<?php echo $passwordErr;?></span> 
     <br><br> 
     <label for="gender">Gender:</label> 
     <input type="radio" name="gender" <?php if (isset($gender) && $gender=="female") echo "checked";?> value="female">Female 
     <input type="radio" name="gender" <?php if (isset($gender) && $gender=="male") echo "checked";?> value="male">Male 
     <span class="error">* <?php echo $genderErr;?></span> 
     <br><br> 
     <input type="submit" name="submit" value="Submit"> 
     </form> 
    </div> 

Jede Hilfe sehr geschätzt wird.

Answer 1

Ich denke, das ist, wie Sie es wollen.

.input-grp { 
 
    position: relative; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
.error { 
 
    position: absolute; 
 
}

<div style="width:60%; text-align: center; background-color: #70b08e; margin: 0 auto;"> 
 
    <span class="global-error">*Required feild</span> 
 
    <br> 
 
    <br> 
 
    <form method="post"> 
 
    <div class="input-grp"> 
 
     <label for="name">User name:</label> 
 
     <input type="text" name="name" value="" maxlength=255> 
 
     <span class="error">error message</span> 
 
    </div> 
 
    <br> 
 
    <br> 
 
    <div class="input-grp"> 
 
     <label for="email">E-Mail:</label> 
 
     <input type="text" name="email" value="" maxlength=255> 
 
     <span class="error">email error</span> 
 
    </div> 
 
    <br> 
 
    <br> 
 
    <div class="input-grp"> 
 

 
     <label for="password">Password:</label> 
 
     <input type="password" name="password"> 
 
     <span class="error">pass error</span> 
 
    </div> 
 
    <br> 
 
    <br> 
 
    <div class="input-grp"> 
 
     <label for="gender">Gender:</label> 
 
     <input type="radio" name="gender" value="female">Female 
 
     <input type="radio" name="gender" value="male">Male 
 
     <span class="error"></span> 
 
    </div> 
 
    <br> 
 
    <br> 
 
    <input type="submit" name="submit" value="Submit"> 
 
    </form> 
 
</div>

Answer 2

ändern text-align: center; von text-align: right; hier:

<div style="width:60%; text-align: right; background-color: #70b08e; margin: 0 auto;"> 

Auch dies:

<div class="error" style="text-align: center;">*Required feild</div> 

See this fiddle