时间戳

首页 > 解决方案 > 如何根据其他网格项的大小垂直居中网格项？

css - 如何根据其他网格项的大小垂直居中网格项？

问题描述

作为参考，index.htmland index.css：

#main-grid {
  display: grid;
  grid-template: [top] 1fr [middle] 2fr [bottom] / [left] 1fr [center] 2fr [right];
}

#main-grid-top-left-item {
  grid-area: top / left / middle / center;
  background-color: red;
}

#main-grid-top-right-item {
  grid-area: top / center / middle / right;
  background-color: lime;
  font-size: xx-large;
}

#main-grid-bottom-left-item {
  grid-area: middle / left / bottom / center;
  background-color: cyan;
}

#main-grid-bottom-right-item {
  grid-area: middle / center / bottom / right;
  background-color: yellow
}

.white-background {
  background-color: white;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="index.css" />
  <title>
    HTML Document
  </title>
</head>

<body>
  <div id="main-grid">
    <div id="main-grid-top-left-item">
      <span class="white-background">
                    0
                </span>
    </div>
    <div id="main-grid-top-right-item">
      <span class="white-background">
                    1
                </span>
    </div>
    <div id="main-grid-bottom-left-item">
      <span class="white-background">
                    2
                </span>
    </div>
    <div id="main-grid-bottom-right-item">
      <span class="white-background">
                    3
                </span>
    </div>
  </div>
</body>

</html>

现在，我想要的是让 top-left0相对于使用包含 top-right 的容器的大小计算的行的大小垂直居中1。这怎么可能？

标签： csscss-grid

解决方案

您可以使用旧的 flexbox 将单元格的内容居中：

#main-grid-top-left-item {
  grid-area: top / left / middle / center;
  background-color: red;

  // and then...
  display: flex;
  //justify-content: center; // do this if you also want horizontal alignment
  align-items: center;
}

这是在您的示例的上下文中：

#main-grid {
  display: grid;
  grid-template: [top] 1fr [middle] 2fr [bottom] / [left] 1fr [center] 2fr [right];
}

#main-grid-top-left-item {
  grid-area: top / left / middle / center;
  background-color: red;
  display: flex;
  align-items: center;
}

#main-grid-top-right-item {
  grid-area: top / center / middle / right;
  background-color: lime;
  font-size: xx-large;
}

#main-grid-bottom-left-item {
  grid-area: middle / left / bottom / center;
  background-color: cyan;
}

#main-grid-bottom-right-item {
  grid-area: middle / center / bottom / right;
  background-color: yellow
}

.white-background {
  background-color: white;
}

```
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="index.css" />
  <title>
    HTML Document
  </title>
</head>

<body>
  <div id="main-grid">
    <div id="main-grid-top-left-item">
      <span class="white-background">
                    0
                </span>
    </div>
    <div id="main-grid-top-right-item">
      <span class="white-background">
                    1
                </span>
    </div>
    <div id="main-grid-bottom-left-item">
      <span class="white-background">
                    2
                </span>
    </div>
    <div id="main-grid-bottom-right-item">
      <span class="white-background">
                    3
                </span>
    </div>
  </div>
</body>

</html>

推荐阅读