Как центрировать текстовое поле ввода HTML? - PullRequest
Новая
       1

Как центрировать текстовое поле ввода HTML?

3 голосов
/ 25 августа 2011

У меня есть форма, и я хочу центрировать текстовые поля и метку по центру.Как я могу это сделать?(Я бы подумал, что выравнивание влево и вправо с авто будет делать это, но это не работает).Это мой код: 

<body>
    <div id="formWrapper">
          </center>
          <form method ="post" action="addMember.php">
          <label for="name">Username:</label>
          <input name="name"/>
          <label for="password">Password:</label>
          <input name="password"/>
          <label for="email">Email:</label>
          <input name="email"/>
            <p>
            <fieldset>
            <input class="btn" name="submit" type="Submit" value="Register"/>
            <input class="btn" name="reset" type="reset" value="Clear Form">
            </fieldset>
      </form>
    </div>
</body>

Стиль: 

#formWrapper{
    width:550px;
    padding: 2em 0 2em 0;
    border:solid 5px #F1F1F1;
    margin-top: 100px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    background-color: #AFC8DE;
}

Ответы [ 5 ]

5 голосов
/ 25 августа 2011

Если вы примените text-align: center к форме, поля будут размещены в центре.

Здесь важна семантика, поэтому взгляните на доступный подход к формам.http://www.alistapart.com/articles/prettyaccessibleforms

1 голос
/ 05 мая 2017

добавьте align = "center" к вашей форме 

div id="formWrapper">
        <form method ="post" action="addMember.php" align="center">
            <label for="name" >Username:</label>
            <input name="name"/>
            <p>
            <label for="password">Password:</label>
            <input name="password"/>
            <p>
            <label for="email">Email:</label>
            <input name="email"/>
            <p>
            <fieldset>
                <input class="btn" name="submit" type="Submit" value="Register"/>
                <input class="btn" name="reset" type="reset" value="Clear Form">
            </fieldset>
        </form>
    </div>

here the output

1 голос
/ 25 августа 2011

взгляните на это: http://jsfiddle.net/7auS8/

0 голосов
/ 07 августа 2014

Я взял этот код и попробовал adarshr ответ, и он центрирует форму.Крис также прав, семантика здесь очень важна, потому что, увидев ее, я чувствую, что это может быть не совсем то, что вы искали.Еще один момент, который я хотел бы добавить к этому для того, кто читает это, возможно, для новичка, это то, что когда вы добавляете text-align: center;он должен войти в файл css и завершиться символом;

0 голосов
/ 19 октября 2013 
    border: 1px solid gray;
    border-radius:5px;
    color: #393939;
    height: 30px;
    padding: 0px 6px 0 6px;
    width: 186px;
...