0
232
ViewsCómo alinear 2 divisiones verticalmente en html
En este momento estoy teniendo dificultades para alinear dos divisiones verticalmente, algo como esto:
Pero no se alinean así y, en cambio, se alinean así horizontalmente:
Y aquí está mi código:
@font-face { font-family: 'mainFont'; src: url("Fonts/Poppins/Poppins-Medium.ttf") format('truetype'); } body { height: 90vh; display: flex; align-items: center; justify-content: center; text-align: center; background: #f8f8f8; position: fixed; top: 0; bottom: 0; left: 0; right: 0; } .main { font-family: 'mainFont'; font-weight: normal; font-style: normal; font-size: 5.6vw; color: #181818; } .subMain { font-family: 'mainFont'; font-weight: normal; font-style: normal; font-size: 3.5vw; color: #181818; position: absolute; } .description { font-family: 'mainFont'; font-weight: normal; font-style: normal; font-size: 2vw; color: #181818; position: absolute; left: 20.6%; bottom: 3%; } .typed-text { color: chartreuse; } .space { margin-top: 150px; } .container p span.typed-text { font-family: 'mainFont'; font-weight: normal; font-style: normal; font-size: 3.5vw; color: #181818; } .cursor { animation: blinker 0.6s linear infinite; color: #181818; } .cursor.typing { animation: none; } @keyframes blinker { 50% { opacity: 0; } } h2, h1 { margin: 0; } <!DOCTYPE html> <html lang='en'> <head> <link rel='stylesheet' href='style.css'> </head> <body> <div> <h1 class='main'>Hello 👋, I'm Saharsh.</h1> <h1 class='subMain'>I am a <span class="typed-text"></span><span class="cursor"></span> </h1> </div> <div> <h1 class='subMain'>Another Division</h1> </div> <script src='Scripts/TypeDeleteText.js'> </script> </body> </html>
·
Juan Pablo Isaza
3 answers
Answer question0
Tu cuerpo está flexionado, colócalo en cuadrícula o agrega flex-direction: column; en tu cuerpo. heres su código en la cuadrícula.
@font-face { font-family: 'mainFont'; src: url("Fonts/Poppins/Poppins-Medium.ttf") format('truetype'); } body { height: 90vh; display: grid; align-items: center; justify-content: center; text-align: center; background: #f8f8f8; position: fixed; top: 0; bottom: 0; left: 0; right: 0; } .main { font-family: 'mainFont'; font-weight: normal; font-style: normal; font-size: 5.6vw; color: #181818; } .subMain { font-family: 'mainFont'; font-weight: normal; font-style: normal; font-size: 3.5vw; color: #181818; position: absolute; } .description { font-family: 'mainFont'; font-weight: normal; font-style: normal; font-size: 2vw; color: #181818; position: absolute; left: 20.6%; bottom: 3%; } .typed-text { color: chartreuse; } .space { margin-top: 150px; } .container p span.typed-text { font-family: 'mainFont'; font-weight: normal; font-style: normal; font-size: 3.5vw; color: #181818; } .cursor { animation: blinker 0.6s linear infinite; color: #181818; } .cursor.typing { animation: none; } @keyframes blinker { 50% { opacity: 0; } } h2, h1 { margin: 0; } <!DOCTYPE html> <html lang='en'> <head> <link rel='stylesheet' href='style.css'> </head> <body> <div> <h1 class='main'>Hello 👋, I'm Saharsh.</h1> <h1 class='subMain'>I am a <span class="typed-text"></span><span class="cursor"></span> </h1> </div> <div> <h1 class='subMain'>Another Division</h1> </div> <script src='Scripts/TypeDeleteText.js'> </script> </body> </html>
·
Juan Pablo Isaza
Report
0
Div es un elemento de bloque, por lo que ocupará todo el ancho de la página, incluso cuando lo flexione, ahora hay espacio para el segundo div. Simplemente dé a ambos div un ancho, por ejemplo, del 50% y para crear una brecha entre los div, simplemente escriba gap: 10px ;.
·
Juan Pablo Isaza
Report
0
Use esta línea en su archivo style.css. flex-direction: column;
·
Juan Pablo Isaza
Report
Answer question