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

eugeniocol · 14 Mar 2017

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.

denzel · 14 Mar 2017

Flexbox se usa para maquetar pequeños módulos, no grandes bloques, menos una página completa.

eugeniocol · 14 Mar 2017

entonces no se puede añadir un segundo texto alineado ???

Salud2.

mrtorpedin · 14 Mar 2017

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

Charlie Araiza · 14 Mar 2017

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.

Flexbox es un modelo de layout...

denzel · 14 Mar 2017

Charlie Araiza dijo:
Flexbox es un modelo de layout...

Pero debe ser usado para maquetar toda una web?? lo correcto hasta el momento es usarlo por módulos

mrtorpedin · 14 Mar 2017

denzel dijo:
Pero debe ser usado para maquetar toda una web?? lo correcto hasta el momento es usarlo por módulos

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:

denzel · 14 Mar 2017

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:

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

mrtorpedin · 14 Mar 2017

denzel dijo:
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

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

Charlie Araiza · 14 Mar 2017

denzel dijo:
Pero debe ser usado para maquetar toda una web?? lo correcto hasta el momento es usarlo por módulos

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

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.

denzel · 14 Mar 2017

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.

Perfecto, solo aclarar que los bugs que mencionaba no son de Bootstrap sino de flexbox, por eso dejé el enlace

Charlie Araiza · 14 Mar 2017

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

Realmente me refería a la incompatibilidad que hay con Flexbox (en referencia a lo que comenta el compañero), no a tu link.

eugeniocol · 15 Mar 2017

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...

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

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.

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

eugeniocol

denzel

eugeniocol

mrtorpedin

Charlie Araiza

denzel

mrtorpedin

denzel

mrtorpedin

Charlie Araiza

denzel

Charlie Araiza

eugeniocol

Temas similares

Privacidad y transparencia

Privacidad y transparencia