0

I've been trying to align vertically some text that I've putted in a div, but I wasn't able to do it.

I've already tried to display the div as a table, and display the inner divs as table-cell but this didn't worked because I'm displaying the div that contains the other divs as a grid, nonetheless I setted some css attributes that in theory it should allow me to vertical align the text, but it doesn't worked as well.

/* 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>

I want to get the text of each row centered (including the image), but instead I ended up getting this.

FA_developes
  • 162
  • 9
Sebastián Arribasplata
  • 41
  • 1
  • 11

2 Answers2

0

I think you are looking for something like this...?

.grid-container>div {
  display: flex;
  justify-content: center;
  align-items: center;
  ...
}

https://codepen.io/DOMUSNETWORK/pen/byOmrG

Ilia luk
  • 2,065
  • 2
  • 16
  • 18
0

Please change #align to .align

and then add some css code:

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