¿Cómo alinear texto debajo de otro en HTML?

  • Autor Autor eugeniocol
  • Fecha de inicio Fecha de inicio
E

eugeniocol

Curioso
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Buenas.

No se como acomadar nuevos textos uno debajo de otro, el <H2> es lo ultimo que intento pero no queda debajo del <H1> en la web en este codigo,dejo el codigo completo que compone todo header:

HTML: 
<div class="flex-container">
       <header class="item">
         <h1>TEXTOOOO1</h1> 
         <h2>TEXTOOOOOOOOOOOO2</h2>
<nav>
           <ul>
            <li>Inicio</li>
            <li>Contacto</li>
            <li>Acerca de</li>
        </ul>
      </nav>
         
    </header>
     <section id="cuerpo" class="item">Cuerpo</section>
     <aside class="item">Aside</aside>
     <footer class="item">Pie</footer>       
</div>

Insertar CODE, HTML o PHP: 
.flex-container{
    width:100%; /* width:90%; */	
    max-width:auto; /* max-width:960px; */
    min-width:auto; /* min-width:320px; */
    margin:0px auto;  /*  margin:20px auto; */     
    display:flex;      
    flex-flow:row wrap;    
    justify-content:center; /*center; */ 
    align-items:center;  /*center; */ 
    align-content:stretch; 
    
}

.item{
    color:#fff;
    text-align:center;
    margin:0 auto;
    font-size:25px; /*font-size:25px;*/
}

header{
    height:150px; /*alto cabecera color negro*/
    background-color:black;/*background-color:black;   */  
    overflow:hidden;
    text-align:center;    
    flex: 1 100%;
}
header h1{ /*TEXTO CABECERA IZQUIERDA*/
    line-height:100px;
    margin:0;
    font-size:18px; /*font-size:35px;*/
    float:left;
    width:40%;
    padding-left:10px;
    box-sizing:border-box;
}

header h2{ /*TEXTO CABECERA IZQUIERDA*/
    
    margin:30;
    font-size:18px; /*font-size:35px;*/
    float:left;
    width:40%;
    padding-left:10px;
    box-sizing:border-box;
}

header nav{
    float:left;
    width:60%; /*width:60%;*/
    line-height:100px;
    padding-right:20px;
    box-sizing:border-box;
}

header ul{
    list-style-type:none;           
    margin:0;
    padding:0;      
    display:flex;
    flex-flow: row wrap;
    justify-content: flex-end;  
}
header ul li{
    margin:0 5px;   
    font-size:20px; 
    cursor:pointer;
    color:#D5C5C5;
}
header ul li:hover{
    color:#fff;
}

Saludosss.
 
Flexbox se usa para maquetar pequeños módulos, no grandes bloques, menos una página completa.
 
Última edición:
entonces no se puede añadir un segundo texto alineado ???

Salud2.
 
puedes hacer flex al mismo header colocandole:
display: flex;
flex-direction: column;
align-items: center;
con eso te va a quedar los h uno arriba del otro y centrados al medio
 
Primero, de entrada está mal estructurado tu código html... 2do. No uses floats mara maquetar si estas usando flexbox.

Así sería la estructura:

HTML: 
<header>
        <div class="texto">
            <h1>TEXTOOOO1</h1> 
            <h2>TEXTOOOOOOOOOOOO2</h2>
       </div>

        <nav>
            <ul>
                <li>Inicio</li>
                <li>Contacto</li>
                <li>Acerca de</li>
            </ul>
        </nav>  
      </header>  
      
      <div class="main">
            <section id="cuerpo" class="item">Cuerpo</section>
            <aside class="item">Aside</aside>
     </div>
     <footer>Pie</footer> 

    </body>


Insertar CODE, HTML o PHP: 
       /*Cabecera*/

            header
            {
                background-color: yellow;

                display:flex;
                justify-content: space-between;
                align-items: center;
            }

            ul
            {
                display: flex;
                /*O inline-block si no quieres usar flexbox*/

            } 

            li 
            {
                margin-right: 2rem;
            }   


            /*Main*/

            .main
            {
                display: flex;
                flex-wrap: wrap;
            }

            #cuerpo
            {
                background-color: lightblue;
                width: 60%;
            }

            aside
            {
                background-color: aquamarine;
                width: 40%;
            }

            .item
            {
                height: 400px;
            }

            /*footer*/

            footer
            {
                background-color: blue;
                color: white;
            }

Checa este tutorial de flexbox: Guia definitiva de flexbox (1) - Main Axis y Cross Axis - YouTube Te puede servir.

- - - Actualizado - - -

denzel dijo:
Flexbox se usa para maquetar pequeños módulos, no grandes bloques, menos una página completa.
Hacer clic para expandir...

Flexbox es un modelo de layout...
 
denzel dijo:
Pero debe ser usado para maquetar toda una web?? lo correcto hasta el momento es usarlo por módulos
Hacer clic para expandir...

Se puede perfectamente maquetar una web entera con flexbox, de hecho hay frameworks como flexbox grid que son para eso. Hasta bootstrap 4 ahora deja de lado los floats para hacer uso de flexbox :encouragement:
 
mrtorpedin dijo:
Se puede perfectamente maquetar una web entera con flexbox, de hecho hay frameworks como flexbox grid que son para eso. Hasta bootstrap 4 ahora deja de lado los floats para hacer uso de flexbox :encouragement:
Hacer clic para expandir...

Leyendo la documentación de Bootstrap 4 pues parece que sí, pero de todas maneras ellos mismos textualmente recomiendan tener cuidado con los bugs relacionados a flexbox
 
denzel dijo:
Pero debe ser usado para maquetar toda una web?? lo correcto hasta el momento es usarlo por módulos
Hacer clic para expandir...

Al ser un modelo de layout, puede usarse perfectamente para maquetar un sitio web en su totalidad. Incluso ya ni se deberían usar los floats más que para acomodar imágenes (para lo que realmente fueron hechos).

- - - Actualizado - - -

mrtorpedin dijo:
Si pero creo que eso esta desactualizado ya que este año ya estan todos los navegadores con flexbox al 100% Can I use... Support tables for HTML5, CSS3, etc obviamente salvo Iexplorer 11 que tiene algunos bugs pero nada importante
Hacer clic para expandir...

Los errores no son por flexbox propiamente, más bien, son errores de estilos de Bootstrap (que se arreglaron).

Ya flexbox funciona bien en cualquier navegador del 2014 a la fecha, incluso sin la necesidad de usar prefix.
 
Charlie Araiza dijo:
Los errores no son por flexbox propiamente, más bien, son errores de estilos de Bootstrap (que se arreglaron).

Ya flexbox funciona bien en cualquier navegador del 2014 a la fecha, incluso sin la necesidad de usar prefix.
Hacer clic para expandir...

Perfecto, solo aclarar que los bugs que mencionaba no son de Bootstrap sino de flexbox, por eso dejé el enlace
 
denzel dijo:
Perfecto, solo aclarar que los bugs que mencionaba no son de Bootstrap sino de flexbox, por eso dejé el enlace
Hacer clic para expandir...

Realmente me refería a la incompatibilidad que hay con Flexbox (en referencia a lo que comenta el compañero), no a tu link.
 
Charlie Araiza dijo:
Primero, de entrada está mal estructurado tu código html... 2do. No uses floats mara maquetar si estas usando flexbox.

Así sería la estructura:

HTML: 
<header>
        <div class="texto">
            <h1>TEXTOOOO1</h1> 
            <h2>TEXTOOOOOOOOOOOO2</h2>
       </div>

        <nav>
            <ul>
                <li>Inicio</li>
                <li>Contacto</li>
                <li>Acerca de</li>
            </ul>
        </nav>  
      </header>  
      
      <div class="main">
            <section id="cuerpo" class="item">Cuerpo</section>
            <aside class="item">Aside</aside>
     </div>
     <footer>Pie</footer> 

    </body>


Insertar CODE, HTML o PHP: 
       /*Cabecera*/

            header
            {
                background-color: yellow;

                display:flex;
                justify-content: space-between;
                align-items: center;
            }

            ul
            {
                display: flex;
                /*O inline-block si no quieres usar flexbox*/

            } 

            li 
            {
                margin-right: 2rem;
            }   


            /*Main*/

            .main
            {
                display: flex;
                flex-wrap: wrap;
            }

            #cuerpo
            {
                background-color: lightblue;
                width: 60%;
            }

            aside
            {
                background-color: aquamarine;
                width: 40%;
            }

            .item
            {
                height: 400px;
            }

            /*footer*/

            footer
            {
                background-color: blue;
                color: white;
            }

Checa este tutorial de flexbox: Guia definitiva de flexbox (1) - Main Axis y Cross Axis - YouTube Te puede servir.

- - - Actualizado - - -



Flexbox es un modelo de layout...
Hacer clic para expandir...

esta copiado de aqui Guía de Flexbox CSS3, creando estructuras flexibles facilmente.

- - - Actualizado - - -

mrtorpedin dijo:
puedes hacer flex al mismo header colocandole:
display: flex;
flex-direction: column;
align-items: center;
con eso te va a quedar los h uno arriba del otro y centrados al medio
Hacer clic para expandir...

ahora queda asi pero la distancia entre h1 y h2 no logro juntarlos lo que yo quiero

Insertar CODE, HTML o PHP: 
header{
    height:150px;
    background-color:black;
    overflow:hidden;
    text-align:center;    
    flex: 1 100%;
	display: flex;
    flex-direction:column;
    align-items:center;
}

header h1{ /*TEXTO CABECERA IZQUIERDA*/    
    line-height:80px;
    margin:0;
    font-size:18px;
    float:left;
    width:40%;
    padding-left:10px;
    box-sizing:border-box;
}

header h2{ /*TEXTO CABECERA IZQUIERDA*/
    line-height:0px; 
    margin:0;
    font-size:18px; 
    float:left;
    width:40%;
    padding-left:10px;
    box-sizing:border-box;
}

Salud2.
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

Armandolqr
Cómo alinear texto sin mostrar todo
Respuestas
3
Visitas
180
JuaniG42
JuaniG42
seal
Cómo poner texto debajo de un iframe con HTML
Respuestas
1
Visitas
138
BotBeta
BotBeta
alebote
Problema para colocar texto debajo de SVG en CSS
Respuestas
2
Visitas
331
alebote
alebote
javiadrados24
Cómo alinear texto en Elementor para textos largos
Respuestas
1
Visitas
240
BotBeta
BotBeta
K
Posiciones de DIV: Cómo mover la PUBLICIDAD debajo de BUSCAR en HTML y CSS
Respuestas
10
Visitas
758
Kratz
K
Atrás
Arriba