2010-09-29 9 views
2

J'ai un forme dans le corps. Et j'essaie de remplacer le formulaire au milieu/centre de l'écran. Y a-t-il un moyen approprié de le faire en CSS?Comment centrer un formulaire horizontalement et verticalement?

----------------------- 
-      - 
-      - 
-      - 
-   M   - 
-      - 
-      - 
-      - 
----------------------- 
+0

Réponse mise à jour pour refléter l'édition. –

Répondre

1

Edit: (code précédent snipped, il n'aligné horizontalement)

Comme personne d'autre a obtenu Retour à propos de l'alignement vertical ... Voici une option. Si la forme est juste assis dans le corps, vous ne voulez pas un emballage, etc .. Solution de base (nécessite une hauteur fixe):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <title>Vertical/Horizontal Align</title> 
    <style type="text/css"> 
     form { 
      height:400px; 
      width:400px; 
      position: absolute; 
      left: 50%; 
      top: 50%; 
      background-color:#CCC; 
      /* Set margins to offset 50% of the w/h */ 
      margin: -200px 0 0 -200px; 
     } 
    </style> 
</head> 
<body> 
    <form action="/something"> 
     <p> 
      <label>NAME: </label> <input type="text" name="Name" /> 
     </p> 
     <p> 
     <label>PHONE: </label> <input type="text" name="Phone" /> 
     </p> 
    </form> 
</body> 
</html> 

couleur de fond est juste pour illustrer la largeur/hauteur ..

+0

Que fait exactement le 'div # FormWrapper' que vous ne pouvez pas appliquer directement à l'élément' form'? –

+0

Honnêtement, probablement rien dans cette situation. Je viens de prendre l'habitude d'encapsuler mes formes dans les divs, car je trouve cela plus flexible lorsque j'applique des transitions JS, que d'utiliser un élément de formulaire comme son propre wrapper. Juste ma préférence personnelle. –

+0

Ah? C'est assez juste =) –

-1

Déclarez une largeur de propriété pour votre formulaire et utiliser la marge gauche automatique, dire:

form{ 
    width: 50%; 
    margin: 0 auto; 
} 
+0

J'ai essayé mais c'est en haut. – ilhan

+0

@ilhan, au sommet de quoi? –

+1

Cela ne fonctionne pas verticalement. – ilhan

Questions connexes