Alinear un botón hasta abajo de un div es una necesidad habitual al crear tarjetas, bloques de contenido, columnas y secciones de llamada a la acción. Cuando varios contenedores tienen textos de distinta longitud, sus botones pueden quedar a diferentes alturas. El resultado es una composición irregular y menos clara para el usuario.
La buena noticia es que se resuelve utilizando CSS. El método más moderno consiste en convertir el contenedor en un elemento Flexbox y colocar el botón al final mediante margin-top: auto. También es posible conseguirlo con posicionamiento absoluto, aunque esta alternativa exige conocer mejor las dimensiones y la estructura del contenedor.
Por qué los botones no quedan alineados abajo
El comportamiento por defecto del módulo Button de Divi es que cada botón ocupa su propia línea - técnicamente, el div que lo envuelve tiene display: block, lo que hace que el siguiente elemento empiece en una línea nueva.
En un diseño con tarjetas, el problema no solo aparece cuando los botones se apilan verticalmente. También puede producirse cuando cada tarjeta contiene una cantidad diferente de texto. En ese caso, el botón aparece inmediatamente después del contenido y no necesariamente coincide con el botón de las tarjetas vecinas.
El botón debe colocarse en la parte inferior del contenedor cuando se desea mantener una altura visual uniforme y facilitar la comparación entre varias opciones.
La solución recomendada: Flexbox
Flexbox es la forma mas moderna de centrar cosas dentro de una página, y convierte el diseño de layouts responsivos en una actividad mucho mas sencilla de lo que solía ser.
Flexbox, también conocido como «Flexible Box Layout», sirve para organizar los elementos HTML en una sola dirección, ya sea horizontal o vertical. Además, se pueden ajustar su tamaño, orden y alineación según las necesidades del diseño, permitiendo a los desarrolladores web crear diseños flexibles y responsivos de manera muy sencilla.
Las propiedades de Flexbox permiten que los elementos se ajusten automáticamente y de forma flexible dentro de un contenedor, por lo que es muy fácil conseguir centrar elementos tanto vertical como horizontalmente.
HTML básico
La estructura puede contener un título, un texto descriptivo y un botón:
Ejemplo de estructura:
<div class="card">
<h2>Título de la tarjeta</h2>
<p>Texto de longitud variable dentro del contenedor.</p>
<a class="button" href="#">Más información</a>
</div>
CSS para colocar el botón abajo
El contenedor debe utilizar Flexbox y organizar sus elementos en dirección vertical:
.card {
display: flex;
flex-direction: column;
}
Después, se aplica margin-top: auto al botón:
.button {
margin-top: auto;
}
La propiedad margin-top: auto ocupa todo el espacio libre disponible encima del botón. Por eso, aunque el texto de cada tarjeta tenga una longitud distinta, el botón se desplaza hacia la parte inferior del contenedor.
Ejemplo completo con una altura uniforme
Para que el efecto sea visible en varias tarjetas, el contenedor debe tener una altura igual o una altura mínima:
.cards {
display: flex;
gap: 20px;
}
.card {
display: flex;
flex-direction: column;
min-height: 320px;
}
.button {
margin-top: auto;
}
En este ejemplo, min-height: 320px establece una altura mínima para cada tarjeta. Si una tarjeta necesita más espacio porque contiene más texto, podrá crecer sin ocultar el contenido.
Alinear el botón abajo y centrarlo horizontalmente
Si además de situar el botón abajo quieres centrarlo horizontalmente, puedes usar:
.button {
margin-top: auto;
align-self: center;
}
Otra posibilidad es hacer que el contenedor alinee sus elementos en el centro del eje horizontal:
.card {
display: flex;
flex-direction: column;
align-items: center;
}
La propiedad de Flexbox «justify-content» se encarga de alinear los elementos horizontalmente dentro del contenedor.
Para la alineación vertical la cosa se complica un poco más. En el tema anterior vimos que vertical-align está intímamente ligado al concepto de altura de línea.
Alinear el botón abajo en una columna de Divi
El CSS que usamos no apunta directamente a los botones sino a la columna que los contiene. Por eso el primer paso es asignarle una clase identificadora a esa columna.
- Abre el Divi Builder en la página donde tienes los botones.
- Haz clic en la columna que contiene los dos botones para abrir su configuración.
- Ve a la pestaña Avanzado → CSS ID & Clases.
- En el campo Clase CSS, ingresa: inline-buttons
- Guarda los cambios.
Consejo: la clase inline-buttons es solo un nombre conveniente - puedes llamarla como quieras.
Si el botón está dentro de una tarjeta o de un módulo de contenido, aplica una clase al contenedor que debe controlar la distribución vertical:
.inline-buttons {
display: flex;
flex-direction: column;
}
.inline-buttons .et_pb_button_module_wrapper {
margin-top: auto;
}
De esta forma, el wrapper del botón se coloca al final del espacio disponible dentro de la columna.
Cómo alinear varios botones en una misma fila
Si tienes dos botones dentro de la misma columna y quieres que queden uno al lado del otro, el comportamiento por defecto debe cambiarse de display: block a display: inline-block.
El truco está en cambiar ese comportamiento a display: inline-block usando una clase CSS que tú controlas, sin tocar los estilos globales del tema.
.inline-buttons {
text-align: center !important;
}
El snippet base centra los botones.
.inline-buttons {
text-align: right !important;
}
Esta variante alinea los botones a la derecha.
Con espaciado personalizado entre botones
El valor 0 10px en el margin agrega 10px a cada lado de cada botón. Si quieres más separación entre ellos, aumenta ese número. Si los botones son grandes y quieres menos espacio, redúcelo.
.inline-buttons .et_pb_button_module_wrapper {
flex: 1;
min-width: 160px;
}
Esta variante con Flexbox es más robusta para diseños donde los botones tienen textos de longitud variable, porque distribuye el espacio automáticamente.
Usar Flexbox para centrar botones
Cuando nos enfrentamos a un código HTML en pantalla, siempre necesitamos de las hojas de estilo CSS para que el diseño que tenemos planteado pueda hacerse realidad. En este caso, una vez hemos creado dos botones en HTML, abriremos nuestra hoja de estilos y tendremos que utilizar el modelo de diseño de cajas en CSS: Flexbox.
La propiedad de Flexbox «justify-content» se encarga de alinear los elementos horizontalmente dentro del contenedor. Como vemos en este ejemplo, lo primero será indicar que el contenedor en el que queremos alinear nuestros botones tiene la propiedad «display: flex».
De esta manera estaremos indicando que el contenedor tendrá modelo de caja Flexbox. Una vez declarada esta propiedad, utilizaremos «justify-content: center» para centrar los dos botones dentro del contenedor de forma horizontal.
Para centrar verticalmente los botones con Flexbox se utiliza la propiedad «align-items: center».
Sin embargo, hay un pequeño dato más que tendremos que añadir. Ya que, si lo comprobáis en vuestro código, si únicamente declaramos esta propiedad y la de «display: flex» en nuestra hoja de estilos, no obtendremos el resultado que estamos buscando, es decir, los botones no se centrarán verticalmente en nuestra pantalla.
Esto sucede, porque para conseguir el resultado que necesitamos, tenemos antes que definir la altura de la que dispone nuestro contenedor para poder alinear los elementos que haya en su interior.
Controlar la altura del div
La altura del contenedor es fundamental cuando quieres alinear un elemento en su interior. Si el contenedor solo mide lo mismo que su contenido, no existe espacio libre que distribuir.
En este caso, hemos indicado una altura del 100vh al contenedor, la unidad de medida «vh» en CSS significa «viewport height» (altura de la ventana gráfica) y es el área visible del sitio web en el navegador.
Lo bueno de esta medida, en comparación con medidas fijas (como los píxeles) es que varía según el tamaño de la pantalla desde la que se esté visualizando la web.
Es decir, tanto si el usuario accede desde un ordenador como si accede desde su dispositivo móvil o tablet, siempre verá el contenido alineado verticalmente en la mitad de la pantalla.
Esta será la unidad de medida más óptima si el resultado que buscamos es alinear nuestros botones en el centro de la pantalla. Sin embargo, si queremos que estén alineados dentro de un contenido de menor altura, podremos aplicar cualquier medida y la propiedad «align-items: center» alineará los botones en el centro del contenedor que hemos creado.
Para colocar un botón en la parte inferior de un bloque no es obligatorio utilizar 100vh. Una altura fija o mínima, como min-height: 320px, suele ser más apropiada para tarjetas, módulos y columnas.
Alternativa con posicionamiento absoluto
Aplicando posicionamiento y traslación podemos también alinear un elemento de bloque dentro de un contenedor de bloque.
El contenedor tendrá position con valor relative con el objeto de que su hijo, que tiene position con valor absolute, se posicione con respecto a su padre.
La posición se marca con las propiedades left y top que son las distancias que separan la esquina superior izquierda del hijo con respecto a la misma esquina del padre.
El patrón básico es:
.card {
position: relative;
min-height: 320px;
}
.button {
position: absolute;
bottom: 20px;
left: 20px;
}
El valor bottom: 20px separa el botón del borde inferior del contenedor. Esta técnica puede ser útil cuando el botón debe permanecer en una posición exacta.
Su principal limitación es que el botón queda fuera del flujo normal del documento. Si el contenido crece y no se ha reservado suficiente espacio, puede superponerse al texto.
Centrar un elemento con transform
Si no conoces la altura de un elemento que deseas centrar (o incluso si conoces esta altura), este método es un truco ingenioso.
Este método es muy similar al de los márgenes negativos explicado anteriormente. Asigna el valor de la propiedad position del elemento padre como relative.
Para los elementos hijos, asigna la propiedad position como absolute y el valor top a 50%.
Considera que translate(0, -50%) es una atajo para translateX(0) y translateY(-50%).
Para alinear un elemento exactamente en el centro se puede combinar también la posición horizontal:
.card {
position: relative;
}
.button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Este método centra el botón, pero no lo coloca específicamente abajo. Para situarlo abajo, es preferible utilizar bottom o Flexbox.
Métodos antiguos de alineación
No hay ninguna propiedad específica para alinear elementos de bloque en CSS2. Se han venido usando diversas técnicas como la del valor auto para los márgenes horizontales que nos permite alinear en esa dirección.
Otra forma es dar al elemento de bloque hijo el valor inline-block en su propiedad display. Así podemos dimensionarlo y obedecerá la alineación de elementos Inline que vimos en temas anteriores.
Usando text-align para el bloque padre y vertical-align para el bloque hijo conseguimos, con ciertas limitaciones, alinear en ambas direcciones.
Una tercera forma de alinear con CSS2 es usando el valor table-cell para la propiedad display. El elemento de bloque se comportará como una celda de tabla, un elemento en CSS2 sobre el que se puede aplicar al mismo tiempo las propiedades text-align y vertical-align.
Lo anterior no deja de ser otra cosa que trucos para alinear elementos de bloque. Porque CSS3 finalmente deberá incorporar propiedades específicas para este cometido.
Alineación mediante márgenes
La especificación CSS2.1, en un apartado sobre cómo calcular anchos y márgenes, expone que si los márgenes derechos e izquierdos margin-left y margin-right tienen ambos el valor auto la caja de bloque se centrará horizontalmente.
El valor auto para márgenes funciona en horizontal, pero es ineficaz en alineación vertical.
En resumen, la alineación con márgenes es adecuada para dirección horizontal, pero dependiente de las dimensiones de ambos elementos en la alineación vertical.
Una técnica fácil de usar no debería tener esta dependencia, como todas las siguientes que expondremos a continuación.
Alineación mediante line-height
Las propiedades de CSS2.1 text-align y vertical-align nos permiten alinear horizontal y verticalmente elementos en línea o Inline.
El truco está en convertir el elemento de bloque hijo en un inline-block. Así aún podemos dotarlo de dimensiones y obedecerán esas propiedades de alineación.
Para la alineación vertical la cosa se complica un poco más.
Se puede producir una alineación al centro vertical incorrecta cuando tenemos varias líneas de texto en el hijo verde, por el tema comentado de que se alinea por la última línea de texto de ese elemento.
Alineación mediante table-cell
La propiedad text-align aplica a elementos de bloque alineando sus hijos de línea (Inline). Por otro lado vertical-align se aplica sólo a elementos Inline.
Hay una excepción a esta regla y es que para celdas de tabla podemos aplicar ambas propiedades a la celda.
La técnica se basa en dar el valor table-cell a la propiedad display del contenedor padre azul.
La principal ventaja es que no estamos obligados a usar igual altura de línea y alto en el padre y, por otro lado, la misma fuente y/o tamaño en el hijo y el padre.
Una desventaja importante es que el contenedor padre ha de tener un ancho determinado si queremos alinear horizontalmente.
Adaptar el código a Divi 5
En Divi 5 el sistema de diseño cambió significativamente. Ahora tienes acceso a variables globales, presets y controles de layout mucho más granulares desde el propio builder, sin necesidad de CSS manual para muchos casos.
Sin embargo, el truco de inline-buttons sigue funcionando perfectamente en Divi 5 porque el selector apunta a clases CSS estándar que no cambiaron.
Lo que sí cambió es dónde agregas el CSS personalizado. En Divi 5 puedes hacerlo desde tres lugares: las Opciones de Tema globales (igual que antes), el panel de CSS del módulo específico, o el nuevo Global Styles.
Mi recomendación para Divi 5 es usar el CSS a nivel de módulo cuando el efecto aplica solo a ese lugar, y las Opciones de Tema cuando lo necesitas en múltiples páginas.
Aplicar el CSS solo en una página
En el editor de la página, ve a Configuración de la Página → CSS Personalizado (aparece en el panel de ajustes del Divi Builder o en la barra lateral de WordPress) y pega el mismo código.
De esta manera el estilo solo aplica en esa página y no afecta el resto del sitio.
Consejo: si usas Divi 5, también puedes agregar el CSS directamente en el módulo de columna desde la pestaña "Estilos → CSS personalizado del elemento". Esto lo mantiene encapsulado en el módulo y es más fácil de encontrar si en el futuro necesitas modificarlo.
Comportamiento responsive en móviles
En móvil, una fila de botones puede quedar demasiado estrecha. En ese caso, es razonable permitir que los botones vuelvan a ocupar líneas separadas.
En móvil, sí puede tener sentido que vuelvan a apilarse.
Una regla responsive puede restablecer el comportamiento vertical:
@media (max-width: 767px) {
.inline-buttons {
flex-direction: column;
}
}
Si los botones se muestran mediante wrappers de Divi, también puedes controlar su anchura para evitar que se aprieten:
@media (max-width: 767px) {
.inline-buttons .et_pb_button_module_wrapper {
width: 100%;
margin-top: 10px;
}
}
¿Funciona en móvil? Sí, los botones se mostrarán en línea en móvil también. El CSS aplica a todos los wrappers de botones dentro de la columna con la clase inline-buttons, sin importar cuántos sean.
Tres o cuatro botones también quedarán en línea. Solo considera que en pantallas pequeñas muchos botones en fila pueden verse apretados - en ese caso el media query del punto anterior te ayuda a controlar el comportamiento en móvil.
Errores frecuentes
No definir una altura o altura mínima
Si el contenedor no tiene espacio libre, margin-top: auto no podrá desplazar el botón. El bloque debe tener una altura o una altura mínima superior a la que ocupa su contenido.
Aplicar la clase al elemento equivocado
El CSS no aplica entre columnas - opera solo dentro de la columna que tiene la clase asignada.
Si tienes los botones en columnas distintas de la misma fila, ya quedan uno al lado del otro naturalmente por el layout de columnas de Divi.
Este truco es específicamente para cuando tienes dos o más botones dentro de la misma columna.
Usar posicionamiento absoluto sin reservar espacio
Con position: absolute, el botón deja de ocupar espacio en el flujo normal. Si el texto ocupa más líneas de las previstas, puede quedar cubierto por el botón.
Confundir alineación horizontal y vertical
No definir la altura en CSS para centrar horizontalmente no suele ser un problema, porque la alineación horizontal no necesita espacio vertical disponible.
Para alinear verticalmente, en cambio, el contenedor debe tener una altura definida o un espacio libre que pueda distribuirse.
Preguntas frecuentes
¿Puedo aplicar esto solo en una sección?
Sí. La clase inline-buttons que asignas a la columna actúa como un scope: el CSS solo aplica dentro de esa columna específica.
Puedes tener múltiples columnas en la misma página, algunas con la clase y otras sin ella, y el efecto solo aplica donde pusiste la clase.
¿Qué pasa si los botones están en columnas diferentes?
El CSS no aplica entre columnas - opera solo dentro de la columna que tiene la clase asignada.
Si tienes los botones en columnas distintas de la misma fila, ya quedan uno al lado del otro naturalmente por el layout de columnas de Divi.
¿Puedo alinear imágenes con el mismo método?
El mismo principio aplica: reemplaza .et_pb_button_module_wrapper por el selector del módulo que contiene tus imágenes (por ejemplo .et_pb_image) y usa la misma clase inline-buttons en la columna.
El comportamiento será el mismo.
¿Es mejor Flexbox o position absolute?
Flexbox suele ser la opción más segura para tarjetas y bloques con contenido variable, porque mantiene los elementos dentro del flujo normal y se adapta mejor a distintos tamaños.
El posicionamiento absoluto puede ser útil cuando el botón debe quedar a una distancia exacta del borde inferior y la altura del contenido está controlada.