formulario central enviar botones html/css

Tengo problemas para centrar mis botones de envío de formulario html en css.formulario central enviar botones html/css

En este momento estoy usando

<input value="Search" title="Search" type="submit" id="btn_s"> 
    <input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">

con este css

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

#btn_i { 
    width:125px; 
    margin-left:auto; 
    margin-right:auto; 
}

y no hace nada, sé que probablemente estoy haciendo algo mal estúpida, puede alguien ayudarme?

Gracias

Fuente

2010-11-19 Belgin Fish

101

http://jsfiddle.net/SebastianPataneMasuelli/rJxQC/

i acaba de terminar un div alrededor de ellos y lo hizo alinear el centro. entonces no necesitas ningún CSS en los botones para centrarlos.

<div class="buttonHolder"> 
    <input value="Search" title="Search" type="submit" id="btn_s"> 
    <input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i"> 
</div> 

.buttonHolder{ text-align: center; }

Fuente

2010-11-19 01:14:59

realidad, el inconveniente de esta solución es que los centros de soporte div * todo * en ella , incluyendo texto e hijos e hijos de niños ... por lo que generalmente es mejor usar 'margin: 0 auto' en elementos individuales, cuando no queremos que todo el contenedor esté centrado, y, como se señaló, puede lograrlo con elementos de bloque. Aún así, de vez en cuando uso el centrado de esta manera, así que es -0 de mí, ya que no estás equivocado ... – vaxquis

Funciona perfectamente para mí cuando lo usé para un enlace de botón de estilo CSS. Envuelva el con el div y la clase y debería funcionar perfectamente sin afectar las diferentes clases. – masmrdrr

Muchas gracias, simple pero funciona como un encanto. –

Prueba esto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<head> 
    <style type="text/css"> 
     #btn_s{ 
      width:100px; 
     } 

     #btn_i { 
      width:125px; 
     } 
     #formbox { 
      width:400px; 
      margin:auto 0; 
      text-align: center; 
     } 
    </style> 
</head> 
<body> 
    <form method="post" action=""> 
     <div id="formbox"> 
      <input value="Search" title="Search" type="submit" id="btn_s"> 
      <input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i"> 
     </div> 
    </form> 
</body>

Esto tiene 2 ejemplos, puede utilizar el que se adapte mejor en su situación.

usa text-align:center en el contenedor principal, o crea un contenedor para esto.
Si el contenedor debe tener un tamaño fijo, utilice los márgenes izquierdo y derecho auto para centrarlo en el contenedor principal.

tenga en cuenta que auto se utiliza con bloques individuales para centrarlos en el espacio principal al distribuir el espacio vacío a la izquierda y derecha.

Fuente

2010-11-19 01:19:31 SuperDuck

Los elementos de entrada están en línea por defecto. Agregue display:block para obtener los márgenes para aplicar. Esto, sin embargo, dividirá los botones en dos líneas separadas. Utilice un envoltorio <div> con text-align: center según lo sugerido por otros para ponerlos en la misma línea.

Fuente

2010-11-19 01:31:28 Tom

Supongo que se supone que los botones están uno al lado del otro en la misma línea, no deben centrarse utilizando el margen "automático", sino dentro de un div con un ancho definido que tiene un margen '0 auto':

CSS:

#centerbuttons{ 
    width:250px; 
    margin:0 auto; 
}

HTML (después de la eliminación de las propiedades de los márgenes de los botones CSS):

<div id="centerbuttons"> 
    <input value="Search" title="Search" type="submit"> 
    <input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit"> 
</div>

Fuente

2010-11-19 01:33:09 Annie

<style> 
form div { 
    width: 400px; 
    border: 1px solid black; 
} 

form input[type='submit'] { 
    display: inline-block; 
    width: 70px; 
} 

div.submitWrapper { 
    text-align: center;  
}  
</style> 
<form> 

<div class='submitWrapper'>  
<input type='submit' name='submit' value='Submit'> 
</div>

También puedes ver este jsfiddle

Fuente

2014-02-17 23:16:55 kta

veo algunas respuestas aquí, la mayoría de ellos complicados o con algunas contras (divs adicionales, text-align no funciona debido a display: inline-block).Creo que esta es la solución más sencilla y sin problemas:

HTML:

<table> 
    <!-- Rows --> 
    <tr> 
     <td>E-MAIL</td> 
     <td><input name="email" type="email" /></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td><input type="submit" value="Register!" /></td> 
    </tr> 
</table>

CSS:

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

Fuente

2017-04-19 16:43:39

Absolutamente de acuerdo con usted, esta es la mejor solución, ¡gracias! +1 – stepik21

formulario central enviar botones html/css

Respuesta

Cuestiones relacionadas