Как центрировать эту форму в css?

Я пробовал все. Я не могу сосредоточиться на экране. Я использую ie 9, но он делает то же самое в хроме. Он просто находится слева от веб-страницы. Спасибо за любую помощь.

<style type="text/css">

body {
    margin:50px 0px; padding:0px;
    text-align:center;
    align:center;
}
label,input {
 display: block;
 width: 150px;
 float: left;
 margin-bottom: 10px;
}

label {
 text-align: right;
 width: 75px;
 padding-right: 20px;
}

br {
 clear: left;
}



    </style>
</head>


<body>

 <form name="Form1"  action="mypage.asp" method="get">

 <label for="name">Name</label>
 <input id="name" name="name"><br>

 <label for="address">Address</label>
 <input id="address" name="address"><br>

 <label for="city">City</label>
 <input id="city" name="city"><br>
 <input type="submit" name="submit" id="submit" value="submit" class="button" />

</form>
</body>

Ответы

Ответ 1

По-другому

body {
    text-align: center;
}
form {
    display: inline-block;
}

<body>
  <form>
    <input type="text" value="abc">
  </form>
</body>

Ответ 2

body { text-align: center; }
     /* center all items within body, this property is inherited */
body > * { text-align: left; }
     /* left-align the CONTENTS all items within body, additionally
        you can add this text-align: left property to all elements
        manually */
form { display: inline-block; }
     /* reduces the width of the form to only what is necessary */

http://jsfiddle.net/sqdBr/4/

Работает и протестирован в Chrome/IE/FF

Ответ 3

Оберните свою форму в div.
Установите div для блокировки и выравнивания текста по центру (это центрирует содержащуюся форму).
Установите отображение формы в встроенный блок (автоматические размеры для содержимого), левое и правое поля для автоматического (центрирует его по горизонтали) и выравнивание текста влево (иначе его дочерние элементы также будут выровнены по центру).

HTML:

<div class="form">
    <form name="Form1" action="mypage.asp" method="get">
        ...
    </form>
</div>

CSS

div.form
{
    display: block;
    text-align: center;
}
form
{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

Ответ 4

Ты можешь попробовать

form {
    margin-left: 25%;
    margin-right:25%;
    width: 50%;
}

Или же

form {
    margin-left: 15%;
    margin-right:15%;
    width: 70%;
}

Ответ 5

Попробуйте добавить это в свой css

.form { width:985px; margin:0 auto }

и добавьте ширину: 100% к тегу тела

Затем поместите:

<div class="form">

перед тегом.

Ответ 6

Я не знаю, было ли сделано полное разрешение для этого. я знаю, что из 2-х столбчатой страницы с фиксированной левой боковой панелью, чтобы получить форму контакта с центром на моей странице, я поставлю следующее:

    form {
 width: 100%;
 margin-left: auto;
 margin-right: auto;
 display: inline-block;
 }

это сработало для меня, так что мысль id выбрасывала мое решение к той же проблеме

Ответ 7

Вы можете использовать следующий CSS для центровки формы (обратите внимание, что для этого важно установить ширину для чего-то, что не является "авто" ):

form {
   margin-left:auto;
   margin-right:auto;
   width:100px;
}

Ответ 8

Я css, я понятия не имел но я сделал это, просто центрируя форму в html что-то вроде этого:

в css:

form.principal {width:12em;}    
form.principal label { float:left; display:block; clear:both; padding:3px;}
form.principal input { float:left; width:8em;}
form.principal button{clear:both; width:130px; height:50px; margin-top:8px;}

затем в html:

<center><form class="principal" method="POST">
<fieldset>
<p><label for="username">User</label><input id="username" type="text" name="username" />
<p><label for="password">Password</label><input id="password" type="password" name="password" /></p>
<button>Log in</button>
</fieldset>
</form></center>

Это центрирует форму, и содержимое будет находиться слева от центрированной формы.

Ответ 9

Обычно, если вы ищете какую-либо программную проблему в stackoverflow, вы быстро найдете четкий ответ. Но в CSS даже такая простая вещь, как "центрирование формы", ведет к долгому обсуждению и множеству неудачных решений.

Исправление: решение orfdorf (выше) работает.

Ответ 10

body {
    text-align: center;
}
form {
    width:90%;
    background-color: #c0d7f8;
}

<body>
  <form>
    <input type="text" value="abc">
  </form>
</body>