Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

[Duda] Como puedo aliniar mi texto?

por Torres Mauricio Ezequiel
| 34.5k xp | 1 posts

Hola! disculpen, no estoy logrando aliniar el texto de "ningun mensaje fue encontrado" (junto al que esta abajo) y el que el boton de copiar este debajo del texto

como podria hacer para poder llevar a cabo mi idea? muchas gracias de ante mano y disculpen si mi pregunta no es del todo clara :)

captura de pantalla de la pagina, con el problema de aliniacion 

        <section>
        <div class="text_area_y_mensaje">
            <textarea class="mensaje" cols="20" rows="10" readonly></textarea>
            <div>
                <div class="texto-area">
                        <h2 class="h2_texto">Ningún mensaje fue encontrado</h2>
                        <p class="parrafo_texto">Ingresa el texto que desees encriptar o desencriptar.</p>
                </div>
            </div>
            <div>
                <button class="btn-copiar">Copiar</button>
            </div>
        </div>    
        </section>

.mensaje{
    width: 400px;
    height: 744px;
    top: 40px;
    left: 1300px;
    background: var(--Color-Blanco);
    background-image: url(/style/Assets/Muñeco.png);
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    border-radius: 32px;
    color: var(--Color-Azul-oscuro);
    margin-left: 98px;
    margin-top: 20px;
    padding-left: 20px;
    position: fixed;
    resize: none;
}

.mensaje:focus {
    outline: none;
}

.texto-area{
    display: flex;
    flex-direction: column;
    text-align: center;
}

.h2_texto{
    font-size: 24px;
    font-weight: 700;
    line-height: 28.8px;
    margin: 0;
}

.parrafo_texto{
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
}

.btn-copiar{
    border: 1px solid var(--Color-Azul-oscuro);
    border-radius: 24px;
    color: var(--Color-Azul-oscuro);
    cursor: pointer;
    height: 67px;
    margin-left: 108px;
    margin-top: 402px;
    position: absolute;
    width: 336px;
}
1 respuesta
por Ingrid Silva
| 1726.4k xp | 5568 posts
Instructor

¡Hola Torres!

Para alinear el texto "Ningún mensaje fue encontrado" junto al texto que está debajo y el botón de copiar debajo del texto, puedes hacer lo siguiente:

  1. Para alinear el texto "Ningún mensaje fue encontrado" junto al texto que está debajo, puedes modificar el estilo del contenedor padre (.texto-area) para que tenga un display: flex con flex-direction: column y align-items: center. Esto hará que los elementos se alineen verticalmente en el centro.

  2. Para colocar el botón de copiar debajo del texto, puedes ajustar el estilo del botón (.btn-copiar) para que tenga un position: relative y un top con un valor adecuado para colocarlo debajo del texto.

Aquí te muestro cómo quedaría el código CSS modificado:

.texto-area{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.btn-copiar{
    position: relative;
    top: 20px; /* Ajusta este valor según sea necesario */
}

Con estas modificaciones, deberías lograr el resultado que buscas. Recuerda ajustar los valores según las necesidades específicas de tu diseño.

Espero que esta información te sea útil. ¡Mucho éxito con tu proyecto!

Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios!