在网格列中对齐项目中心[重复]

Posted 2023-03-05

【中文标题】在网格列中对齐项目中心[重复]

【英文标题】：Aligning items center within grid columns [duplicate]

【发布时间】：2021-04-08 11:09:54

【问题描述】：

我使用 CSS 网格布局创建了一个联系表单，它有 4 个输入字段和一个超过 2 列的提交按钮。

2 个输入字段为 1fr，2 个输入字段为 1/3 宽。我正在尝试将提交按钮置于输入字段下方。我附上了我的 figma 设计的屏幕截图，这样你就可以看到我是如何尝试定位我的提交按钮的。

在阅读了一些关于堆栈溢出的答案后，似乎要使用 justify-content: center on the submit button 我需要在表单中创建一个 div 容器，该容器跨越所有列 1/3 以将按钮放置在其中。然后显然 justify-content: center 可以使用。我已经按照其他答案的建议这样做了，但我仍然无法正常工作。

有人知道我哪里出错了吗？

/* Homepage Contact Form */

.container-form 
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  padding-bottom: 2rem;


.homepage-contact 
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 70rem;
  padding-top: 13rem;


.contact-message 
  font-size: 1.8rem;
  margin-bottom: 2rem;
  font-family: 'Raleway', sans-serif;
  line-height: 3rem;


.home-contact-form form 
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 auto;
  max-width: 90rem;


.home-contact-form form p 
  margin: 0.8rem;


.home-contact-form form .full 
  grid-column: 1 / 3;


.contact-btn-container 
  grid-column: 1/ 3;
  justify-content: center;


.home-contact-form form input 
  height: 4rem;


.home-contact-form form input,
.home-contact-form form textarea,
home-contact-form 
  width: 100%;


input 
  padding-left: 1.5rem;


textarea 
  padding-left: 1.5rem;

<!-- Homepage contact start -->
<section class="homepage-contact container-form">
  <div class="homepage-contact-text">
    <h2 class="title contact-title">Lets Discuss Your Project</h2>
    <p class="contact-message">We’re always happy to discuss your project with you and put together a free proposal, just fill out the form below or give us a call to get started</p>
  </div>
</section>
<div class="home-contact-container">
  <div class="home-contact-form">
    <form action="">
      <p class="full">
        <input type="text" name="name" placeholder="Name">
      </p>
      <p>
        <input type="email" name="email" placeholder="Email">
      </p>
      <p>
        <input type="text" name="phone" placeholder="Phone">
      </p>
      <p class="full">
        <textarea name="message" placeholder="Message" rows="15"></textarea>
      </p>
      <div class="contact-btn-container">
        <p>
          <button class="contact-btn">Submit</button>
        </p>
      </div>

    </form>
  </div>

</div>

【问题讨论】：

为什么不直接使用.contact-btn display: block; margin: 0 auto;？

因为它不起作用。

我在这里试过：它对我有用。你的浏览器是什么？

@AbsoluteBeginner 这将基于提供的代码 OP 工作；您应该将其发布为答案。

它在任何浏览器中都不适合我。它只是将按钮移动到第一列的中心。按钮的 div 容器是 1 / 3，因此它应该是一列，跨越网格的整个宽度，并且按钮应该在轨道 2 上居中

【参考方案1】：

只需使用.contact-btn display: block; margin: 0 auto;。

/* Homepage Contact Form */

.container-form 
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  padding-bottom: 2rem;


.homepage-contact 
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 70rem;
  padding-top: 13rem;


.contact-message 
  font-size: 1.8rem;
  margin-bottom: 2rem;
  font-family: 'Raleway', sans-serif;
  line-height: 3rem;


.home-contact-form form 
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 auto;
  max-width: 90rem;


.home-contact-form form p 
  margin: 0.8rem;


.home-contact-form form .full 
  grid-column: 1 / 3;


.contact-btn-container 
  grid-column: 1/ 3;
  justify-content: center; /* This can be removed */


.home-contact-form form input 
  height: 4rem;


.home-contact-form form input,
.home-contact-form form textarea,
home-contact-form 
  width: 100%;


input 
  padding-left: 1.5rem;


textarea 
  padding-left: 1.5rem;


.contact-btn 
  display: block;
  margin: 0 auto;

<!-- Homepage contact start -->
<section class="homepage-contact container-form">
  <div class="homepage-contact-text">
    <h2 class="title contact-title">Lets Discuss Your Project</h2>
    <p class="contact-message">We’re always happy to discuss your project with you and put together a free proposal, just fill out the form below or give us a call to get started</p>
  </div>
</section>
<div class="home-contact-container">
  <div class="home-contact-form">
    <form action="">
      <p class="full">
        <input type="text" name="name" placeholder="Name">
      </p>
      <p>
        <input type="email" name="email" placeholder="Email">
      </p>
      <p>
        <input type="text" name="phone" placeholder="Phone">
      </p>
      <p class="full">
        <textarea name="message" placeholder="Message" rows="15"></textarea>
      </p>
      <div class="contact-btn-container">
        <p>
          <button class="contact-btn">Submit</button>
        </p>
      </div>

    </form>
  </div>

</div>

【讨论】：

不适用于 Mozilla 或 chrome

【参考方案2】：

.contact-btn-container 
  position: relative;
  grid-column: 1/ 3;
  justify-content: center;
  left: 0;
  right: 0;
  margin: auto;

form .contact-btn
  position: relative;
  width: 300px;
  height: 70px;
  background-color: blue;
  color: white;