He centrado dos elementos de entrada uno encima del otro dentro de un div e intento colocar dos elementos de envío debajo de ellos.

Esto es lo que me gustaría que fuera el resultado:

enter image description here

En cambio, los dos botones de envío no están perfectamente alineados con los elementos de entrada (creo que esto tiene que ver con float: left;:

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

input[type="submit"] {
 margin: 0 auto;
 width: 35%;
 display: block;
 float: left;
}
<input type="text">
<br>
<input type="text">
<br>
<input type="submit">
<input type="submit">
1
The Codesee 25 dic. 2016 a las 00:27

3 respuestas

La mejor respuesta

Elimine el flotador y establezca text-align: center en el elemento padre.

body {
  text-align: center;
}
input[type="text"] {
  margin: 0 auto;
  width: 70%;
  display: block;
}
input[type="submit"] {
  margin: 0 auto;
  width: 35%;
}
<input type="text">
<br>
<input type="text">
<br>
<input type="submit">
<input type="submit">
2
Nenad Vracar 24 dic. 2016 a las 21:32

Puede haber otra forma de hacerlo, pero la forma más fácil que conozco es envolver esos dos elementos en un elemento principal y simplemente aplicar el mismo margen / ancho

input[type="text"] {
  margin: 0 auto;
  width: 70%;
  display: block;
}
input[type="submit"] {
  width: 50%;
  display: block;
  float: left;
}
.center-70 {
  margin: 0 auto;
  width: 70%;
}
<input type="text">
<br>
<input type="text">
<br>
<div class="center-70">
  <input type="submit">
  <input type="submit">
</div>
1
Jhecht 24 dic. 2016 a las 21:33

Hay varias formas de resolver esto.

Esta es una de ellas:

div.container {
  width: 70%;
}
input[type="text"] {
 margin: 0 auto;
 width: 100%;
 display: block;
}

input[type="submit"] {
 margin: 0 auto;
 width: 50%;
 display: block;
 float: left;
}
<div class="container">
<input type="text">
<br>
<input type="text">
<br>
<input type="submit">
<input type="submit">
</div>
0
Dekel 24 dic. 2016 a las 21:34