come allineare il testo verticalmente in un div visualizzato come una griglia?

ho cercato di allineare verticalmente qualche testo che ho messo in un div, ma non ero in grado di farlo.

ho già provato a visualizzare il div come una tabella, e visualizzare i DIV interni come table-cell, ma questo non ha funzionato perché sto visualizzando il div che contiene gli altri DIV come una griglia, tuttavia ho settato alcuni attributi css che in teoria dovrebbe permettere di allineare verticalmente il testo, ma non ha funzionato pure.

/* CSS */ /* TABLA */ .grid-container { display: grid; grid-template-columns: auto auto auto auto auto auto auto; grid-template-rows: 80px 300px; grid-gap: 10px; background-color: #424242; padding: 10px; margin: 50px; } .grid-container>div { background-color: #D0D3D4; text-align: center; padding: 20px 0; font-size: 25px; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif, Haettenschweiler, 'Arial Narrow Bold', sans-serif, Geneva, Tahoma, sans-serif; } #align { text-align: center; vertical-align: middle; line-height: 90px; } /* IMAGENES */ .resize { width: 300px; height: 250px; } <!-- HTML --> <div class="grid-container"> <!-- TITULOS --> <div>Portada</div> <div>Nombre</div> <div>Artista</div> <div>Precio</div> <div>Cantidad</div> <div>Total</div> <div>Cancelar</div> <!-- CONTENIDOS --> <div><img src="rsc/parachutes.jpg" class="resize"></div> <div class="align">Parachutes</div> <div>Coldplay</div> <div>S/100</div> <div>1</div> <div>S/100</div> <div><button>Eliminar</button></div> <div><img src="rsc/dookie.jpg" class="resize"></div> <div>Dookie</div> <div>Green Day</div> <div>S/115</div> <div>1</div> <div>S/115</div> <div><button>Eliminar</button></div> </div>

voglio ottenere il testo di ogni riga centrata (compresa l’immagine), ma invece ho finito per ottenere questo.

EN From: How to align text vertically in a div displayed like a grid?

More similar articles:

5 Comments

  1. hai usato “# align” ma non hai specificato un id ma una classe. utilizzare un punto (.) invece invece invece

    inoltre, per centrare verticalmente, è possibile hardcode con top:50%;

  2. per favore cambia # align a .align

    e poi aggiungere qualche codice css:

    .align {
        text-align: center;
        vertical-align: middle;
        line-height: 90px;
        display: flex;
        justify-content:center;
        align-items:Center;
    }

Leave a Reply

Your email address will not be published. Required fields are marked *