2016-03-29 22 views
1

Ekranda ortalanmış bir form tutmaya çalışıyorum, ancak hata iletisi gibi ek metinler eklediğimde, tüm giriş kutusu hata metnini de ortalamak için kayıyor. Sadece form metin kutusunun ortalamasını ve sağa ekledikten sonra her şeyi istiyorum.Formunu ortalayın ancak değişmiyor

örnek kod: herhangi bir yardım takdir

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

.

+0

Taşı bu: * ve stil o text-align merkezi – satya

+0

Yani olarak Bunu bitişik bir divun içine koymak için mi söylüyorsun? –

cevap

1

bu onu nasıl olduğunu düşünüyorum. üst div dışına

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

+0

Evet, bu mükemmel çok teşekkür ederim. Yani 'pozisyon: mutlak' başka bir şey etkilemeyeceği anlamına gelir? –

+1

Bu durumda diğer herhangi bir unsuru etkilemez en azından .. –

1

Değişim burada text-align: right; tarafından text-align: center;: Ayrıca, bu

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

:

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

See this fiddle

+0

Bu, formun hala ortalanmasını istediğim için yardımcı olmaz. Teşekkürler –

+0

Bunun gibi mi? https://jsfiddle.net/8axxk71w/1/ –

+0

'un içindeki tüm 'u kesip metin ile değiştirirseniz, form ortada olur. Bu asıl sorun olan –

İlgili konular