Как центрировать форму по горизонтали и вертикали? - PullRequest
Новая
       23

Как центрировать форму по горизонтали и вертикали?

2 голосов
/ 30 сентября 2010

У меня есть форма в теле . И я пытаюсь заменить форму в середине / центре экрана. Есть ли правильный способ сделать это в CSS? 

-----------------------
-                     -
-                     -
-                     -
-          M          -
-                     -
-                     -
-                     -
-----------------------

Ответы [ 2 ]

1 голос
/ 30 сентября 2010

Редактировать: (вырезанный предыдущий код, он выровнен только по горизонтали)

Так как никто больше не вернулся к вертикальному выравниванию ... Вот один из вариантов. Если форма просто сидит в теле, вам не нужна оболочка и т. Д. Базовое решение (требуется фиксированная высота): 

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

Цвет фона просто для иллюстрации ширины / высоты.

0 голосов
/ 30 сентября 2010

Объявите свойство width для вашей формы и используйте автоматическое левое поле:

...