html - 在html css中使网格居中的问题

标签 html css centering css-grid

<分区>

我有一个显示 mysqli 数据库数据的网格。我的问题是:网格在页面的左边,我想把它放在中间。我使用文本对齐和其他东西但不起作用。 (我只想显示 3 个网格)这是我的代码:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 5px;
  padding: 10px;



}

.grid-container > div {
 background: linear-gradient(75deg, #3c3ad0, #269e88);
  text-align: center;
  border-radius: 20px;
  color: #fff;


}

.item1 {
  grid-row:span 1;
}


<p style="margin-top: 20px;text-align: center;font-size: 30px;color: #00b7c3"  >پروژه های اخیر</p>

<div class="grid-container">

  <div class="item1">
<p style="font-size:18px;">textt</p>
  <p style="font-size:10px;">texttt</p>
  <footer style="background-color:#35BD65;border-radius:0px 0px 20px 20px">
 'texttt'</footer>
  </div>

</div>

最佳答案

有什么理由需要使用网格? 这是一个简单的 HTML 和 CSS 解决方案

.grid-container {
  width:100%;
}

.grid-container > div {
  background: linear-gradient(75deg, #3c3ad0, #269e88);
  text-align: center;
  border-radius: 20px;
  color: #fff;
}

.item1 {
  width:200px;
  margin:0 auto;
}
<p style="margin-top: 20px;text-align: center;font-size: 30px;color: #00b7c3"  >Test</p>

<div class="grid-container">

  <div class="item1">
      <p style="font-size:18px;">text0</p>
      <p style="font-size:10px;">text1</p>
      <footer style="background-color:#35BD65;border-radius:0px 0px 20px 20px">text2</footer>
  </div>

</div>

关于html - 在html css中使网格居中的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54356570/

上一篇:css - 没有标签的纯 CSS 复选框按钮(jQuery 是一种可能的解决方案)

下一篇:css - 哪些字符在 CSS 类名/选择器中有效?

相关文章:

javascript - Accordion 部分,单击图像以旋转图标

html - 包含带有 <a> 标签的 jQuery Accordion 列表项

css - 如何居中下拉导航栏,并使其仍然响应?

vertical-alignment - 在具有自动高度的div中垂直居中div

html - 固定菜单被相对定位的图像隐藏了吗?

javascript - 如何调试网络 worker

html - 固定定位的 Bootstrap 崩溃

html - 如何在表格的某些列之间添加间距?

javascript - 单个页面上有 1000 个 DOM 元素

css - 在 Twitter Bootstrap 3 中为大屏幕居中固定顶部导航栏