Поместите поле ввода в центр div

У меня есть div, и я хочу, чтобы поле ввода располагалось в центре. Как я могу это сделать?

Ответы

Ответ 1

Ловушка заключается в том, что входные элементы являются встроенными. Мы должны сделать это блоком (display: block), прежде чем позиционировать его в центре: margin: 0 auto. См. Код ниже:

<html>
<head>
    <style>
        div.wrapper {
            width: 300px;
            height:300px;
            border:1px solid black;
        }

        input[type="text"] {
             display: block;
             margin : 0 auto;
        }

    </style>
</head>
<body>

    <div class='wrapper'>
        <input type='text' name='ok' value='ok'>
    </div>    


</body>
</html>

Но если у вас есть div, который позиционируется = абсолютный, нам нужно делать вещи немного по-другому. Теперь смотрите это!

  <html>
     <head>
    <style>
        div.wrapper {
            position:  absolute;
            top : 200px;
            left: 300px;
            width: 300px;
            height:300px;
            border:1px solid black;
        }

        input[type="text"] {
             position: relative;
             display: block;
             margin : 0 auto;
        }

    </style>
</head>
<body>

    <div class='wrapper'>
        <input type='text' name='ok' value='ok'>
    </div>  

</body>
</html>

Надеясь, что это может быть полезно. Спасибо.

Ответ 2

#the_div input {
  margin: 0 auto;
}

Я не уверен, что это работает с хорошим IE6, поэтому вам, возможно, придется это сделать.

/* IE 6 (probably) */
#the_div {
  text-align: center;
}

Ответ 3

#input_box {
    margin: 0 auto;
    text-align: left;
}
#div {
    text-align: center;
}

<div id="div">
    <label for="input_box">Input: </label><input type="text" id="input_box" name="input_box" />
</div>

или вы можете сделать это с помощью дополнения, но это не так уж и много.

Ответ 4

Попробуйте этот сайт, он покажет вам, как сосредоточить вещи в div и/или тексте. Dorward

Ответ 5

Здесь довольно нетрадиционный способ сделать это:

#inputcontainer
{
    display:table-cell; //display like a <td> to make the vertical-align work
    text-align:center; //centre the input horizontally
    vertical-align:middle; //centre the input vertically


    width:200px; //widen the div for demo purposes
    height:200px; //make the div taller for demo purposes
    background:green; //change the background of the div for demo purposes
}

Это может быть не самый лучший способ сделать это, и маржа не будет работать, но она выполняет эту работу. Если вам нужно использовать margin, тогда вы можете обернуть div, который отображается как ячейка таблицы в другом "нормальном" div.

JSFiddle: http://jsfiddle.net/qw4QW/

Ответ 6

Вы можете просто использовать следующий CSS для поля ввода:

.center-block {
  margin: auto;
  display: block;
}

Теперь в html

<div>
  <input class="center-block">
</div>