Mover el texto hacia arriba usando CSS

1. Utilice las propiedades CSS posición y inferior para mover el texto hacia arriba
2. Use la propiedad CSS margin-top para mover el texto hacia arriba

A veces, al desarrollar páginas web, colocamos los textos en la parte inferior o en el pie de página, por lo que es posible que debamos dejar un espacio debajo del texto y mover el texto hacia arriba. Aprenderemos cómo subir el texto desde la parte inferior de la página web.

Utilice las propiedades CSS posición y inferior para mover el texto hacia arriba

En el siguiente ejemplo, hemos creado el elemento <div>, que podemos identificar utilizando el nombre de clase bottom-text. Dentro del elemento <div>, hemos agregado el elemento <h3> con algo de texto y le hemos asignado una clase de texto.

En el código CSS, le hemos dado posición: absoluta al elemento <div> para moverlo en relación con su elemento principal, que es el documento en sí. Además, hemos proporcionado margin-top: 90vh que colocará el elemento <div> con el nombre de clase bottom-text en la parte inferior de la página web.

Hemos agregado algo de CSS a la clase texto para mover el texto hacia arriba desde su posición actual. Aquí, hemos elegido relativo como valor de la propiedad posición, que nos permite mover el texto relativo a su posición.

Para mover el texto hacia arriba, hemos utilizado la propiedad bottom, que moverá el texto 60px hacia arriba, ya que le hemos asignado ese valor. Los usuarios también pueden cambiar el valor de la propiedad inferior y mover el texto hacia arriba en diferentes cantidades.

Asignar valores negativos a la propiedad inferior moverá el texto hacia abajo.

Código HTML:

<div class="bottom-text">
    <h3 class="text">This is the text at bottom.</h3>
</div>

Código CSS:

.bottom-text{
    position: absolute;
    margin-top: 90vh;
}
.text{
    position: relative;
    bottom: 60px;
}

En la imagen de salida anterior, la imagen de la izquierda muestra el texto en su posición original y la imagen de la derecha muestra el texto después de mover el texto hacia arriba desde su posición actual.

Use la propiedad CSS margin-top para mover el texto hacia arriba

En el siguiente ejemplo, hemos utilizado la propiedad CSS margin-top para mover el texto hacia arriba desde su posición actual.

Como se discutió en el ejemplo anterior, este ejemplo también contiene el elemento <div> con la clase bottom-text y el elemento <h3> con el nombre de clase text. Hemos establecido el texto en la parte inferior de la página web agregando algo de CSS a la clase bottom-text.

Para mover el texto hacia arriba, aplicaremos la propiedad margin-top a la clase texto y le asignaremos el valor negativo. Establecer un valor positivo en la propiedad margin-top moverá el texto hacia abajo por cantidad de valor.

Código HTML:

<div class="bottom-text">
    <h3 class="text">This text will be shown at the bottom.</h3>
</div>

Código CSS:

.bottom-text{
    position: absolute;
    margin-top: 90vh;
}
.text{
    margin-top:-100px;
}

El valor negativo margin-top es la mejor manera de mover el texto o cualquier elemento HTML hacia arriba desde su posición actual.