Jak wyrównać formularz na środku strony w html/css

Jestem nowy w html/css. Próbuję zbudować własną formę i próbuję ustawić ją w środku. Użyłem właściwości align w css, ale jej nie działa.Jak wyrównać formularz na środku strony w html/css

kod HTML:

<!DOCTYPE HTML> 
<head> 
    <title>Web Page Having A Form</title> 
    <link rel = "stylesheet" type="text/css" href="Form.css"> 
</head> 
<body> 
    <h1>Create a New Account</h1> 
     <form > 
     <table> 
     <tr> 
     <td>Name :</td> <td><input type="text" name="name"></td><br> 
     </tr> 
     <tr> 
     <td>Email :</td> <td><input type="text" name="email"></td><br> 
     </tr> 
     <tr> 
     <td>Password :</td> <td><input type="password" name="pwd"></td><br> 
     </tr> 
     <tr> 
     <td>Confirm Password :</td> <td><input type="password" name="cpwd"><br> 
     </tr> 
     <tr> 
     <td><input type="submit" value="Submit"></td> 
     </tr> 
     </table> 
     </form> 
</body>

Css Kod:

body 
{ 
    background-color : #484848; 
} 
h1 
{ 
    color : #000000; 
    text-align : center; 
    font-family: "SIMPSON"; 
} 
form 
{ 
    align:"center"; 
}

Jak mogę zmienić kod, aby wyrównać całą postać w środku?

Źródło

2013-09-30 poorvankBhatia

chciałeś centrowanie poziomego lub pionowego? – avrahamcool

Ci się to

demo

css

body { 
    background-color : #484848; 
    margin: 0; 
    padding: 0; 
} 
h1 { 
    color : #000000; 
    text-align : center; 
    font-family: "SIMPSON"; 
} 
form { 
    width: 300px; 
    margin: 0 auto; 
}

Źródło

2013-09-30 07:51:29 falguni

Dzięki to zadziałało, czy możesz mi również powiedzieć, dlaczego szerokość jest potrzebna? – poorvankBhatia

Czy możesz wyjaśnić, dlaczego ta właściwość 'width' jest potrzebna? – Chip

chciałbym po prostu użyć tabeli, a nie forma. Jest to zrobione przy użyciu marginesu.

table { 
    margin: 0 auto; 
}

również spróbować użyć coś jak

table td { 
    padding-bottom: 5px; 
}

zamiast <br />

i również Twój wkład powinien kończyć /> np

<input type="password" name="cpwd" />

Źródło

2013-09-30 07:54:30 Ruddy

+1 za zamknięcie elementów w znaczniku. – avrahamcool

Albo można po prostu użyć <center></center> ta gs.

Źródło

2014-01-07 01:46:58 ashish0810

' jest amortyzowany .. –

marża try: 0 auto; na div pojemnika dla formularza. – agconti

To jest moja odpowiedź. Nie jestem profesjonalistą. Mam nadzieję, że ta odpowiedź może pomóc: 3

<div align="center"> 
<form> 
. 
. 
Your elements 
. 
. 
</form> 
</div>

Źródło

2014-11-13 15:09:59 Puvipavan

Bardzo proste i działa dla mnie. Dzięki! – Francesc

Działa dobrze –

Owiń elementu <form> wewnątrz div pojemnika i zastosować css do div zamiast która sprawia, że rzeczy łatwiejsze.

#aDiv{width: 300px; height: 300px; margin: 0 auto;}

<html> 
 

 
<head></head> 
 

 
<body> 
 
    <div> 
 
    <form> 
 
     <div id="aDiv"> 
 
     <table> 
 
      <tr> 
 
      <td>Name :</td> 
 
      <td> 
 
       <input type="text" name="name"> 
 
      </td> 
 
      <br> 
 
      </tr> 
 
      <tr> 
 
      <td>Email :</td> 
 
      <td> 
 
       <input type="text" name="email"> 
 
      </td> 
 
      <br> 
 
      </tr> 
 
      <tr> 
 
      <td>Password :</td> 
 
      <td> 
 
       <input type="password" name="pwd"> 
 
      </td> 
 
      <br> 
 
      </tr> 
 
      <tr> 
 
      <td>Confirm Password :</td> 
 
      <td> 
 
       <input type="password" name="cpwd"> 
 
       <br> 
 
      </tr> 
 
      <tr> 
 
      <td> 
 
       <input type="submit" value="Submit"> 
 
      </td> 
 
      </tr> 
 
     </table> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</body> 
 

 
</html>

Źródło

2015-11-20 10:12:21 Lucky

Jak wyrównać formularz na środku strony w html/css

Odpowiedz

Powiązane problemy