Foros del Web » Creando para Internet » CSS »

Centrar botones en tabla

Estas en el tema de Centrar botones en tabla en el foro de CSS en Foros del Web. Hola a todos buenas tardes: Con motivos didácticos estoy aplicado estilos a una tabla html. Sin embargo no he podido centrar 2 botones en la ...
  #1 (permalink)  
Antiguo 04/09/2015, 16:45
 
Fecha de Ingreso: febrero-2007
Mensajes: 43
Antigüedad: 17 años, 9 meses
Puntos: 0
Centrar botones en tabla

Hola a todos buenas tardes:

Con motivos didácticos estoy aplicado estilos a una tabla html. Sin embargo no he podido centrar 2 botones en la parte inferior de la tabla de manera horizontal utilicé la propiedad "margin: 0 auto" y "vertical-align:middle" en las celdas correspondientes pero no logro centrarlos a continuación comparto el código:

<html>
<head>
<title>
</title>
<style>
h1{
text-align:center;
color:blue;
border-bottom: 2px dotted blue;
width:50%;
margin:0 auto;
padding-bottom: 5px;
}

body{
background-color: #FFFF99;
}

table{
border:2px solid red;
padding:30px;
margin:0 auto;
}

/*.boton{
vertical-align: middle;
}*/
</style>

</head>
<body>

<h1>Registro de articulos</h1>
<form action="insertar_registros.php">
<table>
<tr>
<td><label for="cod">Codigo Articulo:</label></td>
<td><input type="text" name="cod" id="cod"></td>
</tr>
<tr>
<td><label for="sec">Seccion:</label></td>
<td><input type="text" name="sec" id="sec"></td>
</tr>
<tr>
<td><label for="nom">Nombre:</label></td>
<td><input type="text" name="nom" id="nom"></td>
</tr>
<tr>
<td><label for="precio">Precio:</label></td>
<td><input type="text" name="precio" id="precio"></td>
</tr>
<tr>
<td><label for="fecha">Fecha:</label></td>
<td><input type="text" name="fecha" id="fecha"></td>
</tr>
<tr>
<td><label for="imp">Importado:</label></td>
<td><input type="text" name="imp" id="imp"></td>
</tr>
<tr>
<td><label for="pais">Pais de origen</label></td>
<td><input type="text" name="pais" id="pais"></td>
</tr>
<tr>&nbsp;</tr>
<tr>&nbsp;</tr>
<tr>
<td style="margin: 0 auto;"><input type="submit" name="Enviar" value="Enviar"></td>
<td style="margin: 0 auto;"><input type="reset" name="borrar" value="Borrar"></td>
</tr>
</table>
</form>

</body>
</html>

No se, quiza tenga el error en mis narices pero no doy con el truco. Agradezco la ayuda, gracias.
  #2 (permalink)  
Antiguo 04/09/2015, 22:04
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 10 años
Puntos: 208
Respuesta: Centrar botones en tabla

El error es que cada botón está en una celda diferente, alineados a la izquierda. Lo correcto para centrarlos, sería colocar ambos input en un mismo <td> e indicarle a esa celda que abarque el espacio de 2 celdas.

Entonces, cambia esto:

Código HTML:
Ver original
  1. <tr>
  2.     <td style="margin: 0 auto;"><input type="submit" name="Enviar" value="Enviar"></td>
  3.     <td style="margin: 0 auto;"><input type="reset" name="borrar" value="Borrar"></td>
  4. </tr>

Por esto:

Código HTML:
Ver original
  1. <tr>
  2.     <td colspan="2" style="text-align:center;">
  3.         <input type="submit" name="Enviar" value="Enviar"/>
  4.         <input type="reset" name="borrar" value="Borrar"/>
  5.     </td>
  6. </tr>

La clave es el "colspan" que es la propiedad que indica que el elemento <td> debe ocupar el espacio de 2 celdas horizontalmente. De la misma manera se utiliza "rowspan" para indicar que ocupe el tamaño de determinado número de celdas, pero verticalmente.

Y para centrar ambos botones usa "text-align:center" en el <td>. Con esto van a quedar al centro de la celda, pero muy juntos.. con agregarles un margin de 5 o 10px (o los que creas necesario) se soluciona.

Saludos

Etiquetas: background, botones, color, html, php, tabla, todo, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:37.