html - vertical - ¿Cómo alinear el contenido de un div al fondo?
centrar texto horizontalmente css (24)
Aquí está la manera flexible de hacerlo. Por supuesto, no es compatible con IE8, ya que el usuario lo necesitaba hace 7 años. Dependiendo de lo que necesite apoyar, algunos de estos pueden eliminarse.
Aún así, sería bueno si hubiera una manera de hacer esto sin un contenedor externo, simplemente hacer que el texto se alinee dentro de sí mismo.
#header {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 150px;
}
Digamos que tengo el siguiente código CSS y HTML:
#header {
height: 150px;
}
<div id="header">
<h1>Header title</h1>
Header content (one or multiple lines)
</div>
La sección del encabezado es de altura fija, pero el contenido del encabezado puede cambiar. Me gustaría que el contenido del encabezado esté alineado verticalmente con la parte inferior de la sección del encabezado, por lo que la última línea de texto se "pega" a la parte inferior de la sección del encabezado.
Entonces, si solo hay una línea de texto sería como:
-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------
Y si hubiera tres líneas:
-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------
¿Cómo se puede hacer esto en CSS?
Aquí hay otra solución que usa flexbox pero sin usar flex-end para la alineación del fondo. La idea es establecer el margin-bottom en h1 en auto para enviar el contenido restante a la parte inferior:
#header {
height: 350px;
display:flex;
flex-direction:column;
border:1px solid;
}
#header h1 {
margin-bottom:auto;
}
<div id="header">
<h1>Header title</h1>
Header content (one or multiple lines) Header content (one or multiple lines)Header content (one or multiple lines) Header content (one or multiple lines)
</div>
También podemos hacer lo mismo con margin-top:auto en el texto, pero en este caso necesitamos envolverlo dentro de un div o span :
#header {
height: 350px;
display:flex;
flex-direction:column;
border:1px solid;
}
#header span {
margin-top:auto;
}
<div id="header">
<h1>Header title</h1>
<span>Header content (one or multiple lines)</span>
</div>
Después de lidiar con este mismo problema durante algún tiempo, finalmente descubrí una solución que cumple con todos mis requisitos:
- No requiere que yo sepa la altura del contenedor.
- A diferencia de las soluciones relativas + absolutas, el contenido no flota en su propia capa (es decir, se incrusta normalmente en el div contenedor).
- Funciona en todos los navegadores (IE8 +).
- Sencillo de implementar.
La solución solo toma una <div> , a la que llamo "alineador":
CSS
.bottom_aligner {
display: inline-block;
height: 100%;
vertical-align: bottom;
width: 0px;
}
html
<div class="bottom_aligner"></div>
... Your content here ...
Este truco funciona mediante la creación de un div alto y delgado, que empuja la línea de base del texto hasta la parte inferior del contenedor.
Aquí hay un ejemplo completo que logra lo que el OP estaba solicitando. He hecho el "bottom_aligner" grueso y rojo solo para fines de demostración.
CSS:
.outer-container {
border: 2px solid black;
height: 175px;
width: 300px;
}
.top-section {
background: lightgreen;
height: 50%;
}
.bottom-section {
background: lightblue;
height: 50%;
margin: 8px;
}
.bottom-aligner {
display: inline-block;
height: 100%;
vertical-align: bottom;
width: 3px;
background: red;
}
.bottom-content {
display: inline-block;
}
.top-content {
padding: 8px;
}
HTML:
<body>
<div class="outer-container">
<div class="top-section">
This text
<br> is on top.
</div>
<div class="bottom-section">
<div class="bottom-aligner"></div>
<div class="bottom-content">
I like it here
<br> at the bottom.
</div>
</div>
</div>
</body>
El sitio que acabo de hacer para un cliente solicitó que el texto del pie de página fuera un cuadro alto, con el texto en la parte inferior Logré esto con un simple relleno, debería funcionar para todos los navegadores.
<div id="footer">
some text here
</div>
#footer {
padding: 0 30px;
padding-top: 60px;
padding-bottom: 8px;
}
Encontré esta solución basada en una plantilla de inicio bootstrap predeterminada
/* HTML */
<div class="content_wrapper">
<div class="content_floating">
<h2>HIS This is the header<br>
In Two Rows</h2>
<p>This is a description at the bottom too</p>
</div>
</div>
/* css */
.content_wrapper{
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
}
.content_floating{
display: table-cell;
vertical-align: bottom;
padding-bottom:80px;
}
La forma moderna de hacerlo sería usando flexbox . Vea el ejemplo a continuación. Ni siquiera necesita envolver Some text... en cualquier etiqueta HTML, ya que el texto contenido directamente en un contenedor de flexión se envuelve en un elemento de flex anónimo.
header {
border: 1px solid blue;
height: 150px;
display: flex; /* defines flexbox */
flex-direction: column; /* top to bottom */
justify-content: space-between; /* first item at start, last at end */
}
h1 {
margin: 0;
}
<header>
<h1>Header title</h1>
Some text aligns to the bottom
</header>
Si solo hay algo de texto y desea alinearlo verticalmente con la parte inferior del contenedor.
section {
border: 1px solid blue;
height: 150px;
display: flex; /* defines flexbox */
align-items: flex-end; /* bottom of the box */
}
<section>Some text aligns to the bottom</section>
Los elementos de bloque en línea o en línea pueden alinearse con la parte inferior de los elementos de nivel de bloque si la altura de línea del elemento padre / bloque es mayor que la del elemento en línea. *
margen:
<h1 class="alignBtm"><span>I''m at the bottom</span></h1>
css:
h1.alignBtm {
line-height: 3em;
}
h1.alignBtm span {
line-height: 1.2em;
vertical-align: bottom;
}
* Asegúrate de que estás en modo estándar
No necesitas un absoluto + relativo para esto. Es muy posible utilizar la posición relativa tanto para el contenedor como para los datos. Así es como lo haces.
Asume que la altura de tus datos será x . Su contenedor es relativo y el pie de página también es relativo. Todo lo que tienes que hacer es agregar a tus datos.
bottom: -webkit-calc(-100% + x);
Sus datos siempre estarán en el fondo de su contenedor. Funciona incluso si tienes contenedor con altura dinámica.
HTML será así
<div class="container">
<div class="data"></div>
</div>
CSS será así
.container{
height:400px;
width:600px;
border:1px solid red;
margin-top:50px;
margin-left:50px;
display:block;
}
.data{
width:100%;
height:40px;
position:relative;
float:left;
border:1px solid blue;
bottom: -webkit-calc(-100% + 40px);
bottom:calc(-100% + 40px);
}
Espero que esto ayude.
Parece estar trabajando:
HTML: estoy en la parte inferior
css:
h1.alignBtm {
line-height: 3em;
}
h1.alignBtm span {
line-height: 1.2em;
vertical-align: bottom;
}
Parece estar trabajando:
#content {
/* or just insert a number with "px" if you''re fighting CSS without lesscss.org :) */
vertical-align: -@header_height + @content_height;
/* only need it if your content is <div>,
* if it is inline (e.g., <a>) will work without it */
display: inline-block;
}
Usar menos hace que resolver los rompecabezas de CSS sea más parecido a la codificación que a ... Me encanta CSS. Es un verdadero placer cuando puede cambiar todo el diseño (sin romperlo :) simplemente cambiando un parámetro.
Sé que esto tiene más de 2 años, pero he ideado una manera mucho más simple de lo que se ha mencionado.
Establecer la altura de la cabecera div. Luego, dentro de eso, diseñe su etiqueta H1 de la siguiente manera:
float: left;
padding: 90px 10px 11px
Estoy trabajando en un sitio para un cliente, y el diseño requiere que el texto esté en la parte inferior de un determinado div. He logrado el resultado utilizando estas dos líneas y funciona bien. Además, si el texto se expande, el relleno seguirá siendo el mismo.
Si no estás preocupado por los navegadores antiguos, utiliza un flexbox.
El elemento padre necesita su tipo de visualización configurado para flexionar
div.parent {
display: flex;
height: 100%;
}
A continuación, configura la alineación del elemento hijo en flex-end.
span.child {
display: inline-block;
align-self: flex-end;
}
Aquí está el recurso que solía aprender: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Si pudiera establecer la altura del div de envoltura del contenido (# header-content como se muestra en la respuesta de otro), en lugar de la #header completa, quizás también pueda probar este enfoque:
HTML
<div id="header">
<h1>some title</h1>
<div id="header-content">
<span>
first line of header text<br>
second line of header text<br>
third, last line of header text
</span>
</div>
</div>
CSS
#header-content{
height:100px;
}
#header-content::before{
display:inline-block;
content:'''';
height:100%;
vertical-align:bottom;
}
#header-content span{
display:inline-block;
}
Si tiene varios elementos de altura dinámica, use los valores de visualización CSS de tabla y tabla-celda:
HTML
<html>
<body>
<div class="valign bottom">
<div>
<div>my bottom aligned div 1</div>
<div>my bottom aligned div 2</div>
<div>my bottom aligned div 3</div>
</div>
</div>
</body>
</html>
CSS
html,
body {
width: 100%;
height: 100%;
}
.valign {
display: table;
width: 100%;
height: 100%;
}
.valign > div {
display: table-cell;
width: 100%;
height: 100%;
}
.valign.bottom > div {
vertical-align: bottom;
}
He creado una demostración de JSBin aquí: http://jsbin.com/INOnAkuF/2/edit
La demostración también tiene un ejemplo de cómo alinear verticalmente el centro utilizando la misma técnica.
Simplemente puede lograr flexión
header {
border: 1px solid blue;
height: 150px;
display: flex; /* defines flexbox */
flex-direction: column; /* top to bottom */
justify-content: space-between; /* first item at start, last at end */
}
h1 {
margin: 0;
}
<header>
<h1>Header title</h1>
Some text aligns to the bottom
</header>
Solución 2015
<div style=''width:200px; height:60px; border:1px solid red;''>
<table width=100% height=100% cellspacing=0 cellpadding=0 border=0>
<tr><td valign=bottom>{$This_text_at_bottom}</td></tr>
</table>
</div>
http://codepen.io/anon/pen/qERMdx
de nada
Su posicionamiento relativo + absoluto es su mejor apuesta:
#header {
position: relative;
min-height: 150px;
}
#header-content {
position: absolute;
bottom: 0;
left: 0;
}
#header, #header * {
background: rgba(40, 40, 100, 0.25);
}
<div id="header">
<h1>Title</h1>
<div id="header-content">Some content</div>
</div>
Pero puedes tener problemas con eso. Cuando lo probé, tuve problemas con los menús desplegables que aparecen debajo del contenido. Simplemente no es bonito.
Honestamente, para problemas de centrado vertical y, bueno, cualquier problema de alineación vertical con los elementos no es de altura fija, es más fácil usar tablas.
Un ejemplo perfecto de navegador cruzado es probablemente este aquí:
http://www.csszengarden.com/?cssfile=/213/213.css&page=0
La idea es mostrar el div en la parte inferior y también hacer que se quede allí. A menudo, el enfoque simple hará que el div sticky se desplace hacia arriba con el contenido principal.
A continuación se muestra un ejemplo mínimo totalmente funcional. Tenga en cuenta que no hay div engaño de incrustación requerida. Los muchos BR son solo para forzar que aparezca una barra de desplazamiento:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
#floater {
background: yellow;
height: 200px;
width: 100%;
position: fixed;
bottom: 0px;
z-index: 5;
border-top: 2px solid gold;
}
</style>
</head>
<body>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="floater"></div>
</body>
</html>
Si se está preguntando si su código podría no estar funcionando en IE, recuerde agregar la etiqueta DOCTYPE en la parte superior. Es crucial que esto funcione en IE. Además, esta debe ser la primera etiqueta y nada debe aparecer encima de ella.
Una solución muy simple, de una línea, es agregar una línea de altura al div, teniendo en cuenta que todo el texto del div se pondrá en la parte inferior.
CSS:
#layer{width:198px;
height:48px;
line-height:72px;
border:1px #000 solid}
#layer a{text-decoration:none;}
HTML:
<div id="layer">
<a href="#">text at div''s bottom.</a>
</div>
tenga en cuenta que esta es una solución práctica y rápida cuando solo desea que el texto dentro de div se caiga, si necesita combinar imágenes y cosas, tendrá que codificar un CSS un poco más complejo y sensible.
Utilizar posicionamiento CSS.
/* creates a new stacking context on the header */
#header {
position: relative;
}
/* positions header-content at the bottom of header''s context */
#header-content {
position: absolute;
bottom: 0;
}
Como señaló cletus , necesita identificar el contenido del encabezado para hacer que esto funcione.
<span id="header-content">some header content</span>
<div style="height:100%; position:relative;">
<div style="height:10%; position:absolute; bottom:0px;">bottom</div>
</div>
Yo uso estas propiedades y funciona!
#header {
display: table-cell;
vertical-align: bottom;
}
prueba con
div.myclass { margin-top: 100%; }
intenta cambiar el% para arreglarlo. Ejemplo: 120% o 90% ... etc.
#header {
height: 150px;
display:flex;
flex-direction:column;
}
.top{
flex: 1;
}
<div id="header">
<h1 class="top">Header title</h1>
Header content (one or multiple lines)
</div>
#header {
height: 250px;
display:flex;
flex-direction:column;
background-color:yellow;
}
.top{
flex: 1;
}
<div id="header">
<h1 class="top">Header title</h1>
Header content (one or multiple lines)
</div>
display: flex;
align-items: flex-end;