我一直在尝试垂直对齐我放在 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>我想让每一行的文本居中（包括图像），但我最终得到了这个.
我想你正在寻找这样的东西......？
.grid-container>div {
display: flex;
justify-content: center;
align-items: center;
...
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句