Soy nuevo en HTML y estoy tratando de agregar una nueva línea entre h1 y h2, aquí está el código
@font-face { font-family: 'mainFont'; src: url("Fonts/Poppins/Poppins-Medium.ttf") format('truetype'); } body { height: 90vh; display: flex; align-items: center; text-align: center; justify-content: 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: 60px; color: #181818; } .subMain { font-family: 'mainFont'; font-weight: normal; font-style: normal; font-size: 45px; color: #181818; } <!DOCTYPE html> <html lang='en'> <head> <link rel='stylesheet' href='style.css'> </head> <body> <h1 class='main'>Hello World 👋</h1> <h2 class='subMain'> I'm a Game Developer</h2> </body> </html> He intentado cosas como br pero no funcionan en absoluto y obtengo un resultado como este
Flexbox hace que sus elementos se muestren horizontalmente. Solo necesita eliminar display:flex en estilos de body que lo ayudarán a dividirlo en 2 líneas como de costumbre.
h1 y h2 tienen su propio margen predeterminado, lo que crea una gran brecha entre ellos. Para eliminar la brecha de margen entre h1 y h2 , debe establecer el margin como se muestra a continuación
h2, h1 { margin: 0; } @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: 60px; color: #181818; } .subMain { font-family: 'mainFont'; font-weight: normal; font-style: normal; font-size: 45px; color: #181818; } /*Override default margin of h1 and h2*/ h2, h1 { margin: 0; } <!DOCTYPE html> <html lang='en'> <head> <link rel='stylesheet' href='style.css'> </head> <body> <h1 class='main'>Hello World 👋</h1> <h2 class='subMain'> I'm a Game Developer</h2> </body> </html> Otro enfoque para su caso es agregar otro elemento entre body y su contenido. En esa situación, no necesita modificar los estilos del body , todos los elementos dentro de div adicionales estarán en el centro por flexbox desde el cuerpo.
@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: 60px; color: #181818; } .subMain { font-family: 'mainFont'; font-weight: normal; font-style: normal; font-size: 45px; color: #181818; } h2, h1 { margin: 0; } <!DOCTYPE html> <html lang='en'> <head> <link rel='stylesheet' href='style.css'> </head> <body> <div> <h1 class='main'>Hello World 👋</h1> <h2 class='subMain'> I'm a Game Developer</h2> </div> </body> </html>Si desea agregar un espacio vacío, puede usar: <br> Si desea poner una línea, debe usar <hr>
Luego puede diseñar el estilo con css.
Sólo añadir <br> baliza
<h1 class='main'>Hello World 👋</h1> <br> <h2 class='subMain'> I'm a Game Developer</h2> body { height: 90vh; text-align: center; justify-content: center; background: #f8f8f8; position: fixed; top: 0; bottom: 0; left: 0; right: 0; }