1

No he podido lograr que un texto se alinee horizontal y verticalmente dentro de un div.

Tengo el siguiente css:

html, body {
    position: relative;
    margin:0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    color: #333;
    margin: 0;
    padding: 8px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

div{
    display: grid;
        background-color: blue;
        max-height: 200px;
        min-height: 200px;
        min-width: 100%;
        max-width: 100%;
    }
    div p{

        color:white ;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
<div>
    <p>{tkn}</p>
</div>

En teoría el párrafo dentro del div debería salir centrado tanto horizontal como vertical según el código css, pero el texto me lo esta pintando en la parte de arriba.

Es decir que no lo esta centrando verticalmente, solo horizontalmente.

2 respuestas 2

1

Para arreglarlo, únicamente cambia los estilos que tienes en el p en el parent

div {
    display: grid;
    background-color: blue;
    justify-content: center;
    align-items: center;
    max-height: 200px;
    min-height: 200px;
    min-width: 100%;
    max-width: 100%;
}

div p {
    color: white;
    text-align: center;
}

Sólamente cambiando esos dos atributos del p al div ya se te centrará verticalmente el contenido del div.

Tienes que recordar que quien marca el estilo de como se verá el contenido es el contenedor, no el contenido.

0

En los estilos del div, debes substituir el "display: grid;" por "display: flex;" y en los estilos del elemento p, debes agregar estas dos líneas: margin: 0 auto; align-self: center;

2
  • 1
    Display grid permite perfectamente alinear el contenido en el centro, si así lo quiere hacer él
    – Zander
    Commented el 13 sept. 2021 a las 7:11
  • Si es la respuesta sin embargo no es necesario que sea flexbox. El justify-content y el align-items también funcionan con grid. Commented el 13 sept. 2021 a las 7:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.