适用于具有离子框架视图的等高行

Question

我试图在具有4x3网格的我的一个离子视图中显示网格。我希望网格适合视图，使所有行具有相同的高度，并且所有列的宽度也相同，并且所有单元格中的所有内容都垂直和水平对齐。

我不擅长CSS，所以我很难与它，任何帮助？

Answer 1

Ionic构建了网格类。你可以做这样的事情

<div class="row"> 
    <div class="col"></div> 
    <div class="col"></div> 
    <div class="col"></div> 
</div> 

<div class="row"> 
    <div class="col"></div> 
    <div class="col"></div> 
    <div class="col"></div> 
</div> 

他们有一个非常好的文档，他们的网格系统和其他方式来设置行和列。链接：http://ionicframework.com/docs/components/#grid

为css居中这应该工作：只需在你的行和列周围放置一个div并应用这个类。我不是一个伟大的CSS，但我会尽力帮助：P

<div class=container> 
     <div class="row contained"> 
      <div class="col">Centered!</div> 
     </div> 
    </div> 

div.container { 
    height: 50%; } 
div.contained { 
    margin: 0; 
    background: yellow; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-right: -50%; 
    transform: translate(-50%, -50%) }