0
219
VistasCómo centrar un elemento relacionado con su hermano anterior
Tengo un formulario simple como la imagen de abajo.
Quiero centrar el botón "Enviar" relacionado con el área de texto debajo de la etiqueta "Mensaje". Si hago esto con márgenes de posición absolutos, relativos y personalizados, se ve diferente y no centrado en diferentes resoluciones. También estoy usando Bootstrap.
Mi formulario está dentro de un div padre;
<div className="my-5 emailform"> <form className="contact-form"> ...other elements <h3>Message</h3> <textarea className="textarea" name="message" /> <input className="sendbutton" type="submit" value="Send" /> </form> </div>Entonces, lo que estoy tratando de lograr es poner el elemento "sendbutton" debajo del medio del elemento "textarea". Hasta ahora todos mis intentos no han tenido éxito. ¿Cómo puedo centrar un elemento en su hermano de manera receptiva?
1 Respuestas
Responde la pregunta0
.contact-form{ display: flex; flex-direction: column; justify-content: center; align-items: center; } <div class="my-5 emailform"> <form class="contact-form"> ...other elements <h3>Message</h3> <textarea class="textarea" name="message" ></textarea> <input class="sendbutton" type="submit" value="Send" /> </form> </div>También hay otros métodos, como puede dar display: inline-block para formar niños y establecer su ancho: 100% y usar text-align: center en el padre. Pero este es el más seguro.