Question

我一直在尝试垂直对齐放置在div中的某些文本，但是我无法做到这一点。

我已经尝试过将div显示为表格，并将内部div显示为表格单元格，但这没有用，因为尽管如此，我还是将包含其他div的div显示为网格。一些css属性在理论上应该允许我垂直对齐文本，但是效果不佳。

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

我想使每一行的文本居中（包括图像）居中，但最终我得到this。

Answer 1

您使用了“ #align”，但未指定 id ，而是指定了 class 。使用点（。）代替

此外，要垂直居中，您可以使用top:50%;

对其进行硬编码。

Answer 2

我认为您正在寻找类似的东西...？

react-native run-android --variant=gvrDebug

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

Answer 3

请将#align更改为.align

，然后添加一些CSS代码：

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

如何在显示为网格的div中垂直对齐文本？

3 个答案: