Alinear a la derecha un botón en HTML

Para colocar un botón en el borde derecho de su área contenedora, inclúyelo en un contenedor y establece en él la propiedad CSS text-align con el valor right. La alineación depende del ancho disponible del contenedor, así que este debe abarcar el área en la que quieres situar el botón. Este artículo también muestra float: right como alternativa y explica en qué casos importa su distinto comportamiento de diseño.

Propiedades para alinear el botón a la derecha

CSS permite alinear contenido en línea dentro de un contenedor con text-align o hacer que un elemento flote con float. Para consultar una guía más amplia sobre cómo posicionar elementos en una página, visita distintas propiedades CSS para la alineación.

Usa la propiedad text-align para alinear un botón a la derecha en HTML

Coloca el botón dentro de un <div> y aplica text-align: right a ese <div>. Por ejemplo, el marcado completo es <div class="button-row" style="text-align: right;"><button type="button">Save</button></div>. El botón permanece en el flujo normal del contenido en línea, mientras que el contenedor lo alinea a su lado derecho. En una hoja de estilos, puedes escribir la misma regla como .button-row { text-align: right; } y asociarla al <div> mediante class="button-row".

Este JavaScript autónomo imprime el código fuente de una página HTML completa que usa el método del contenedor. Guarda el marcado impreso en un archivo HTML y ábrelo en un navegador para ver el botón en el lado derecho de la página. El texto del botón del ejemplo permanece en inglés porque el bloque de código se conserva sin cambios.

const page = `<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Right-aligned button</title>
<div style="text-align: right;">
  <button type="button">Save</button>
</div>
</html>`;

console.log(page);

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Right-aligned button</title>
<div style="text-align: right;">
  <button type="button">Save</button>
</div>
</html>

Así se alinea el botón dentro del contenedor, pero no necesariamente junto al borde de la ventana del navegador. Asigna al contenedor el ancho del área que quieras usar; si es un bloque contenedor de ancho completo, el botón quedará alineado con el borde derecho de ese bloque. Estos fragmentos de HTML y CSS son ejemplos de código fuente: necesitas un navegador para ver su resultado visual.

Usa la propiedad float para alinear un botón a la derecha en HTML

Para hacer flotar el botón directamente, usa <button type="button" style="float: right;">Save</button> o añade la regla .action-button { float: right; } a una hoja de estilos y asigna class="action-button" al botón. El elemento flotante desplaza el botón hacia el lado derecho de su bloque contenedor y modifica cómo fluye a su alrededor el contenido en línea. Si el diseño debe continuar debajo del botón flotante, elimina el efecto del flotado o usa un método de diseño como flexbox.

Al igual que con el método del contenedor, la posición de float depende del ancho del bloque contenedor. Por sí sola, esta propiedad no coloca el botón junto al borde derecho de la ventana del navegador. Estos fragmentos describen el comportamiento de CSS en el navegador y no se pueden ejecutar en el entorno de ejecución configurado.

La mejor propiedad CSS para alinear botones

Para colocar un solo botón a la derecha de una fila o sección, es preferible aplicar text-align: right al contenedor. Así, el botón permanece en el flujo normal y queda claro qué controla la alineación: el contenedor determina la posición de su contenido en línea. Usa float: right cuando quieras que el botón afecte el ajuste del texto o cuando el diseño requiera específicamente un elemento flotante; ten en cuenta el contenido que fluye a su lado y elimina el efecto del flotado si el contenido posterior debe comenzar debajo.

Ninguno de los dos métodos selecciona por sí mismo el área pertinente de la página. Si el botón queda demasiado a la izquierda o a la derecha, comprueba el ancho y la posición del contenedor. Para diseños con varios controles o con separaciones más complejas, también puedes usar un contenedor flex con justify-content: flex-end; los dos métodos anteriores resuelven la tarea de alineación directa.

Conclusión

Para alinear un botón sencillo a la derecha, aplica text-align: right a un contenedor con el ancho adecuado. Aplica float: right al botón cuando necesites su comportamiento particular respecto al flujo del texto y organiza el contenido circundante en consecuencia. En ambos casos, el borde derecho visible lo determina el bloque contenedor.