0
233
ViewsCómo colocar el elemento de entrada en el medio de las dos columnas
Quiero crear una página web que tome un número como entrada, luego el color de fondo par o impar cambia según el número, por ejemplo, si ingreso 2, el color de fondo impar se vuelve gris y el color de fondo par se vuelve verde, espero que entiendas lo que quiero. para hacer, la cuestión es que quiero colocar el campo de entrada en el medio como en la imagen. ¿Alguien puede ayudarme a hacerlo? Sería muy útil para propósitos futuros también, ¡Gracias!
3 answers
Answer question0
Para colocar la entrada en el medio de los cuadros, puede usar desde la posición absoluta y, según el tamaño de los cuadros, debe establecer los estilos 'izquierda' y 'arriba' para la entrada, por ejemplo, en mi ejemplo:
<body> <div class="box box1">EVEN</div> <div class="box box2">ODD</div> <input type="text" name="input" /> </body>CSS:
*{ box-sizing: border-box; } .box{ float: left; padding: 200px; width: 50%; } .box1{ background-color: green; } .box2{ background-color: red; } input{ position: absolute; left: 45%; top: 200px; padding: 5px; border-radius: 10px; } 
0
Agregué una solución a continuación. También tenía una etiqueta div de cierre adicional sin tener una abierta, también la eliminé para usted.
body { font-family: Arial; color: white; } .split { height: 100%; width: 50%; position: fixed; z-index: 1; top: 0; overflow-x: hidden; padding-top: 20px; } .top { z-index: 2; width: 100%; left: 0; right: 0; } .left { z-index: 1; left: 0; background-color: #111; } .right { right: 0; background-color: red; } .centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .centered img { width: 150px; border-radius: 50%; } form { height: 100%; } .form-group { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100%; } <div class="split top"> <form method ="POST"> <div class="form-group"> <label for="Id_messsage">Message</label> <textarea class="form-control" id=Id_message" name="message" rows="5"></textarea> </div> </form> </div> <div class="split left"> <div class="centered"> <h2>EVEN</h2> </div> </div> <div class="split right"> <div class="centered"> <h2>ODD</h2> </div> </div>0
Establézcalo en el contenedor de la pantalla de entrada flexible y luego estará en el medio de la página, así:
display:flex; justify-content:Center; align-items:center;