Поле ввода ввода в центре div

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

источник

2009-08-15 user156073

может у сеют, что вы пытались и не работает ? – TigerTiger

Не должно ли это перейти к doctype? (http://blog.stackoverflow.com/2009/08/stack-overflow-and-doctype/; http://doctype.com/) ... почему у нас нет опции close-on-doctype close ? – derobert

#the_div input { 
    margin: 0 auto; 
}

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

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

источник

2009-08-15 07:46:27

спасибо, что помогли мне. – user156073

Отлично! лучше всех сложных решений. –

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

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

источник

2009-08-15 15:04:58 Tom

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

источник

2009-08-15 15:52:29

Уловка состоит в том, что входные элементы являются встроенными. Мы должны сделать это блоком (дисплей: блок), прежде чем позиционировать его в центре: 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, который расположен = абсолютное, то мы должны делать вещи немного differently.Now увидеть это!

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

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

источник

2012-08-26 07:34:36 kta

«Уловка состоит в том, что входные элементы встроены» - это ключ! thansk – oak

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

#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/

источник

2012-08-26 08:07:05 starbeamrainbowlabs

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

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

Сейчас в HTML,

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

источник

2017-11-07 15:23:49 Ayan

Поле ввода ввода в центре div

ответ

Смежные вопросы