1

Tengo un botón <input type="submit"> dentro de un formulario y de un div. El div tiene un ancho especificado y también un padding. Quiero que el botón se muestre totalmente centrado en el div pero no lo consigo.

Aquí el código

.dVolver {
  text-align: center;
  background-color: lightblue;
  padding: 0.5em;
  width: 400px;
}
<div class="dVolver">
  <form method="POST" action="creatabla.php">
    <input type="submit" value="VOLVER">
  </form>
</div>

<br><br>

<div class="dVolver">
  <input type="submit" value="VOLVER">
</div>

Vaya, resulta que si ejecutan el código aquí lo ven correctamente, pero si lo prueban en Chrome o Firefox verán que en el primer div el botón VOLVER no está centrado, en la parte inferior hay más espacio que en la parte superior. En el segundo div sí se ve centrado el botón porque he eliminado el formulario, pero necesito el formulario, no lo puedo eliminar.

¿Por qué no sale centrado correctamente?

4
  • Saludos lo he probado en firefox y se encuentra perfectamente centrado, quiza deberias revisar si no posees otras clases que esten afectando a este elemento..!! el 26 jul. 2019 a las 19:14
  • Eliminaste caché en ambos navegadores? Verificaste que no tuvieras otro css u otra clase que estuviera sobrescribiendo tus estilos? el 26 jul. 2019 a las 19:17
  • No lo entiendo. No hay más código, sólo ese de más arriba, el css y el html... Aquí lo tengo subido y tampoco se ve correctamente centrado: waswas.byethost7.com/pruebas/pru.php
    – Juaqui
    el 26 jul. 2019 a las 19:23
  • Lo he probado en dos ordenadores y en un móvil y esto es lo que yo veo: waswas.byethost7.com/pruebas/no%20centrado.jpg
    – Juaqui
    el 26 jul. 2019 a las 19:55

4 respuestas 4

2

La razón seria que en el primer div tenes dos elementos, y en el segundo un solo elemento proba quitándole la clase al div y colocándole la misma clase al form

2
  • Colocando la clase al form sí que funciona. Gracias!
    – Juaqui
    el 26 jul. 2019 a las 20:11
  • @bayocr Agrega lo que comentas en tu respuesta, sería de ayuda para los miembros de la comunidad, saludos.
    – Jorgesys
    el 27 jul. 2019 a las 16:57
1

.container1{
  display: table;
  background-color: red;
  height: 100px;
  width: 100%;
  text-align:center;
}

.container2{
  display: table-cell;
  vertical-align: middle
}
<div class="container1">
  <div class="container2">
    <button>Test</button>
  </div>
</div>

Espero te sirva.

1
  • 1
    Las publicaciones que son sólo código se consideran de baja calidad y no suelen ser de ayuda par otros usuarios. Por favor, añade una descripción con lo que hace el código compartido y cómo soluciona el problema de la pregunta. Lee Cómo responder para más información.
    – Alvaro Montoro
    el 27 jul. 2019 a las 11:57
0

¡Hola! Si querés centrar todo dentro del elemento div, primero tenés que colocar todo dentro del mismo y después simplemente le agregas los siguientes estilos al div:

.contenedor{
  display:flex;
  justify-content:center;
  align-items:center;
}
<div class="contenedor">
  
  <!-- CONTENIDO DEL DIV -->
  
</div>

0

Inténtalo con line-height;

.dVolver {
  text-align: center;
  background-color: lightblue;
  padding: 0.5em;
  width: 400px;
  line-height:200px;
}
 input {
  line-height:200px;
 }

Es un valor que controla el espacio entre líneas con valores de porcentane relativos. Funciona dándole el mismo valor a ambos elementos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.