Html 网格容器中的定心元件

发布于03月26日

我想在容器的中心对齐一些元素，容器有一个显示网格.在这个元素的中心，有网格间隙.

所以我想把我的元素，两个按钮与箭头对齐，在最中心(那里有7).

我知道它可以很好地使用绝对位置，但我真的想避免它，因为我使用的是带有过渡的svelte，而使用绝对位置会改变元素的位置.

下面是我的页面和网格布局的图片:

下面是代码

.content-container {
    display: -ms-grid;
    display: grid;
    min-height: 0;
    min-width: 0;
    grid-auto-flow: dense;
    min-height: 100vh;
    min-width: 100vw;

    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 50px;

    //adding the padding to the container
    padding: 50px;
    
    background: blue;
}
.nav-link {
    align-self: start;
    justify-self: center;
}
.nav-link.work {
    align-self: end;
}

<section class="content-container">
    <div class="nav-link about">
        btn
    </div>
    <div class="nav-link work">
        btn
    </div>
</section>

推荐答案

一种方法是使两个按钮跨越列6和列7(grid-column: 6 / span 2)之间.您可以通过指定grid-row:1和grid-row:span 1来确保它们位于顶部和底部行.

.content-container {
  display: -ms-grid;
  display: grid;
  min-height: 0;
  min-width: 0;
  grid-auto-flow: dense;
  min-height: 100vh;
  min-width: 100vw;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 50px;
  padding: 50px;
  outline: 1px solid red;
}

.nav-link {
  grid-column: 6 / span 2;
  align-self: start;
  justify-self: center;
}

.nav-link.about {
  grid-row: 1;
}

.nav-link.work {
  grid-row: span 1;
  align-self: end;
}

<section class="content-container">
  <div class="nav-link about">
    btn
  </div>
  <div class="nav-link work">
    btn
  </div>
</section>

Html相关问答推荐

R中的动态Webscraping

Html 网格容器中的定心元件

推荐答案

Html相关问答推荐

R中的动态Webscraping

Chrome和Safari浏览器中的CSS3动画不同

由于列中的图像，它们不会随FlexBox中的窗口大小进行调整

如何实现弯曲的梯形导航栏？

如何使用html和css关键帧创建动画

摆动的html标签

当文本添加到元素中时，将元素拉到页面上

Flex：第一个 div 有列，下一个 div 有行

30000ms后超时重试：期望找到元素：someElement，但从未找到它

如何为高度较小的块制作边框动画？

一旦大于最大限制，JQuery 取消 Select 复选框

为什么 Flexbox 中相邻元素上的 flex：1 会影响另一个元素的固定宽度？

CSS 网格跨度行到所有行

使用 calc 函数设置字体大小时 Flexbox 项目重叠

在 iPhone 上分隔 HTML 邮箱输入中的多个邮箱条目

我如何使用 CSS nth-child(odd) nth-child(even) 来对齐 CSS 网格中的列？

如何在 Tailwind CSS 中创建响应式网格布局？

如何使列表的第一个元素比 css 中的其他元素大？

如何向弹出窗口添加 sanitize： false 选项？

无法使用 Reactjs 多次更新本地存储