Hola alguien sabe como hacer que el texto se centre en la caja, solo me se text-align: center; y no funciona 😦

Diana Gonzalez Yescas

Diana Gonzalez Yescas

Pregunta
studenthace 4 años

Hola alguien sabe como hacer que el texto se centre en la caja, solo me se text-align: center; y no funciona 😦

9 respuestas
para escribir tu comentario
    walter castro

    walter castro

    studenthace 4 años

    Hola, yo utilice el position: relative, como complemento al text align.

    Matías Criado

    Matías Criado

    studenthace 4 años

    Otro método para alinearlo verticalmente y horizontalmente es que le agregues a

    #one
    , la propiedad de
    display: flex
    , y luego le sumas
    justify-content: center
    y
    align-items: center
    . Con eso ya no tendras problemas para alinear elementos.

    CRISTIAN BARBERO PÉREZ

    CRISTIAN BARBERO PÉREZ

    studenthace 4 años

    text-align: center
    te lo centra de manera horizontal.

    Si lo quieres centrado verticalmente lo más sencillo es no ponenrle una altura al div (o ponerle auto, que es el que tiene por defecto) y quedará centrado automáticamente. Y si quieres hacer el div más grande le añades un

    padding top y bottom
    iguales.

    Diana Gonzalez Yescas

    Diana Gonzalez Yescas

    studenthace 4 años

    Captura de pantalla de 2020-12-15 07-38-06.png

    y no puedo centrar donde dice "Texto"

    Diana Gonzalez Yescas

    Diana Gonzalez Yescas

    studenthace 4 años

    Captura de pantalla de 2020-12-15 07-35-39.png

    Este es el codigo

    Matías Criado

    Matías Criado

    studenthace 4 años

    Cuando no funcione

    text-align: center
    es recomendable revisar si el elemento que queremos centrar se encuentra en un contenedor con un width definido, por ejemplo
    width: 600px
    Para ese caso, podríamos centrar elementos de 2 maneras:

    • Una es agregando el

      text-align: center
      en el contenedor y eso automáticamente centrara todo el contenido que pongamos dentro de este elemento.

    • La otra es por cada uno de los elementos agregándoles

      text-align: center
      .

    Esta lógica funciona tanto para flex, como para positions absolute, padding, margin, etc. Como dijo alguna vez el gran Leonidas en html todo es una caja, y para centrar contenido este elemento debe tener siempre un contenedor padre. :)

    Andrés Ricaño

    Andrés Ricaño

    studenthace 4 años

    Estaria excelente poder revisar que estas haciendo pero como comenta @ceporro puedes ponerle padding a tu texto, y sino igual jugar con el margen, un centrado perfecto puede hacerse con margin: 0 auto; pero todo depende.

    Carlos Eduardo Gomez García

    Carlos Eduardo Gomez García

    teacherhace 4 años

    ¿Puedes subir tu código y capturas? Así de podemos ayudar mejor:D!

    CRISTIAN BARBERO PÉREZ

    CRISTIAN BARBERO PÉREZ

    studenthace 4 años

    En principio

    text-align: center
    debería funcionar (se lo tienes que poner al contenedor). También puedes conseguirlo poniéndole un
    padding
    a ambos lados

Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]

Crea vistas web fluidas y eficientes con HTML, CSS y Flexbox. Aprende a estructurar layouts adaptables, desde mobile a desktop, optimizando imágenes y aplicando buenas prácticas semánticas y de accesibilidad.

Curso de HTML y CSS [Empieza Gratis]
Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]

Crea vistas web fluidas y eficientes con HTML, CSS y Flexbox. Aprende a estructurar layouts adaptables, desde mobile a desktop, optimizando imágenes y aplicando buenas prácticas semánticas y de accesibilidad.