Como alinhar texto abaixo de outro em HTML?

eugeniocol · 14/03/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>

Inserir CODE, HTML ou 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/03/2017

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

eugeniocol · 14/03/2017

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

Salud2.

mrtorpedin · 14/03/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/03/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>

Inserir CODE, HTML ou 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 disse:
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/03/2017

Charlie Araiza disse:
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/03/2017

denzel disse:
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/03/2017

mrtorpedin disse:
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/03/2017

denzel disse:
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/03/2017

denzel disse:
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 disse:
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/03/2017

Charlie Araiza disse:
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/03/2017

denzel disse:
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/03/2017

Charlie Araiza disse:

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>

Inserir CODE, HTML ou 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 disse:
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

Inserir CODE, HTML ou 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.

Como alinhar texto abaixo de outro em HTML?

eugeniocol

denzel

eugeniocol

mrtorpedin

Charlie Araiza

denzel

mrtorpedin

denzel

mrtorpedin

Charlie Araiza

denzel

Charlie Araiza

eugeniocol

Tópicos similares