Coloque el cuadro de entrada en el centro de div

Tengo un div, y quiero que el cuadro de entrada se coloque en su centro. ¿Cómo puedo hacer esto?Coloque el cuadro de entrada en el centro de div

Fuente

2009-08-15 user156073

puede u nos sembrar lo que ha intentado y no funciona ? – TigerTiger

¿No debería pasar esto a doctype? (http://blog.stackoverflow.com/2009/08/stack-overflow-and-doctype/; http://doctype.com/) ... ¿por qué no tenemos una opción de cierre de belongs-on-doctype? ? – derobert

#the_div input { 
    margin: 0 auto; 
}

No estoy seguro de si esto funciona en buen ol 'IE6, por lo que puede que tenga que hacer esto en su lugar.

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

Fuente

2009-08-15 07:46:27

gracias por ayudarme. – user156073

¡Perfecto! mejor que todas las soluciones complejas. –

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

o puede hacerlo utilizando el relleno, pero esto no es tan grande de una idea.

Fuente

2009-08-15 15:04:58 Tom

Pruebe este sitio web que le muestra cómo centrar las cosas en un div o un texto. Dorward

Fuente

2009-08-15 15:52:29

El problema es que los elementos de entrada están en línea. Tenemos que bloquearlo (pantalla: bloque) antes de colocarlo en el centro: margen: 0 automático. Por favor, vea el código de abajo:

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

Pero si usted tiene un div que se posiciona = absoluta entonces tenemos que hacer las cosas poco differently.Now ver esto!

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

Espero que te sirva. Gracias.

Fuente

2012-08-26 07:34:36 kta

"El problema es que los elementos de entrada están en línea": ¡esta es la clave! thansk – oak

Aquí está una manera poco convencional de hacerlo:

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

tal vez no sea la mejor manera de hacerlo, y el margen no va a funcionar, pero hace el trabajo. Si necesita usar margen, entonces puede ajustar el div que se muestra como una celda de tabla en otro div 'normal'.

jsFiddle: http://jsfiddle.net/qw4QW/

Fuente

2012-08-26 08:07:05 starbeamrainbowlabs

sólo puede utilizar el siguiente CSS para el campo de entrada:

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

Ahora en html,

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

Fuente

2017-11-07 15:23:49 Ayan

Coloque el cuadro de entrada en el centro de div

Respuesta

Cuestiones relacionadas