Texto CSS Alinear parte inferior del contenedor

Tengo un encabezado que tiene una imagen grande flotando en un lado, y un pequeño párrafo de texto en el otro lado. Quiero que el párrafo comience en la parte inferior del encabezado div. Si hubiera 5 líneas en el párrafo, quiero que la última línea esté en la parte inferior del encabezado. Tengo problemas para que el párrafo se alinee allí.Texto CSS Alinear parte inferior del contenedor

tengo algo como esto:

<div id='header'> 

    <img id='logo' /> 

    <p id='quote'></p> 

</div>

Y la CSS es:

div#header { 
    height: 200px; 
} 

div#header img#logo { 
    float: left; 
} 

p#quote { 
    float: left; 
}

Fuente

2011-12-06 djt

Entonces, ¿quieres que todo lo alineado a la izquierda tenga lado, o qué? – PseudoNinja

http://jsfiddle.net/danheberden/ymwPe/

<div id="container"> 
    <div id="gonnaBeOnTheBottom"> 
     <p>Hi there!</p> 
     <p>I'm on the bottom!</p> 
    </div> 
</div>

css:

#container { 
    background: #EEE; 
    height:400px; 
    width:400px; 
    position:relative; 
} 
#gonnaBeOnTheBottom { 
    position:absolute; 
    bottom:0; 
}

configurando position:relative en el contenedor primario, puede colocar elementos de posición absoluta dentro de él :)

Fuente

2011-12-06 17:13:55

¡bingo! ¡Gracias por los consejos! – djt

He hecho algunos cambios en su código. Prueba este

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<style> 


div#header { 
height:200px; 
} 

div#header img#logo { 
float:left; 
} 

.header p { 
float:left 
} 

</style> 
</head> 
<body> 

<div id='header'> 

    <img id='logo' src="../Pictures/myfarm.PNG" width="220" height="130" /> 

<p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p> 
    <p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p> 
    <p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p> 
    <p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p> 
    <p > ygkgi65iruyrftyhgffhfjgfhgjkhjfjhfjhfyj </p> 

</div> 
</body> 
</html>

Fuente

2011-12-06 17:40:01

Proporcione un poco más de explicación acerca de su código y necesita –

Recientemente me encontré con un truco vertical central que yo era capaz de adaptarse a este fin servidor: http://codepen.io/Bushwazi/pen/VYBBmL

parent { 
    height: 200px; 
} 
child { 
    position: relative; 
    top: 100%; 
    transform: translateY(-100%); 
    display block 
}

** que señalar que el navegador debe ser compatible con CSS3 transform: http://caniuse.com/#search=transforms

Fuente

2015-03-04 22:01:36

El código de su codepen (usando flexbox) es completamente diferente de esta respuesta, que no funciona. – phillyslick

Supongo que no entendí completamente la pregunta. Pensé que el objetivo era hacer que el texto se "alinee verticalmente" con la parte inferior del elemento primario. Espero que esto sea útil para otra persona que termina aquí buscando una respuesta como yo. –

Texto CSS Alinear parte inferior del contenedor

Respuesta

Cuestiones relacionadas