Centering items within grid columns for optimal alignment

I have successfully designed a contact form using a CSS grid layout that features 4 input fields and a submit button spanning across 2 columns.

Two of the input fields take up 1fr of space each, while the remaining two are 1/3 wide. My challenge lies in centering the submit button below the input fields as per my figma design screenshot.

After scouring through various responses on stack overflow, it seems that I need to create a div container within the form that covers all columns (1/3 in this case) to properly position the button using justify-content: center. Although I followed these suggestions, I'm still unable to achieve the desired outcome.

Is there anyone who can point out where I might be making an error? 

/* 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>

htmlcsscss-grid

Answer №1

To implement the button style, simply add the following CSS code: 

.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">Discuss Your Project</h2>
    <p class="contact-message">We’re happy to discuss your project and provide a free proposal, fill out the form or call us to start</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">Send Message</button>
        </p>
      </div>

    </form>
  </div>

</div>

Answer №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;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

the else/if statement executes only on the first run

In my current code, when the user inputs a color that matches any of the colors in the array, it will add that color class to the main div. The issue I'm facing is that my else-if statements only run once. If you input the same color again, it won&ap ...

javascripthtmlcss

Vuetify's offset feature seems to be malfunctioning as it does not

I'm facing an issue with the <v-flex> element in my code, specifically with the offset property not responding as expected. Despite following the recommended layout from the vuetify docs, I can't seem to get it right. Below you can see the ...

htmlcssvue.jsflexboxvuetify.js

How to Insert a Background Image into Advanced Custom Fields (ACF) using CSS

Hey there, I'm facing a bit of a challenge with this particular section. In the past, I've only included ACF PHP within HTML when the background image was directly in the HTML code. Now, however, I have two shapes specified in my CSS using pseudo ...

phphtmlcsswordpressadvanced-custom-fields

Guide to switching content within a DIV when the up and down buttons are pressed using JavaScript and jQuery

I have a functional code with a timeline where each event is connected to the other. There are buttons to delete and copy data, but I want to implement functionality for swapping elements when the up or down button is clicked. I have provided a sample code ...

javascriptjqueryhtmlreplace

Learn how to implement icons within Textfield components using Material-UI and TypeScript in React

I have successfully created a form with validation using TypeScript Material UI and Formik. Now, I am looking to enhance the visual appeal by adding a material UI Icon within the textfield area. Below is a snippet of my code: import React from 'reac ...

cssreactjstypescriptmaterial-uiformik

What is the reason for the excessive width of the final column in this table?

I am currently working with a dataset that I am displaying using the handsontable library in the form of a table. One issue I am facing is that the last column of my table appears too wide even though I did not specify any width for it. Below you can see t ...

javascriptjqueryhtmlcsshandsontable

Unable to display image on HTML page transmitted via socket in Java

After successfully loading my simple HTML in Chrome and seeing it display correctly, I encountered a troubling issue when trying to pass it through a Java socket. Despite only passing bytes through the socket, the image always appears broken. The perplexin ...

javahtmlsocketsclient-server

Easily generate a hierarchical layout in HTML with this straightforward method

I'm currently working on implementing a hierarchical tree structure for a website. I need to organize a user's projects, tasks, and sub-tasks in a visually appealing manner using HTML elements. Any suggestions or creative ideas are welcome! ...

c#htmlcssvisual-studio

A method for setting values independently of [(ngModel)] within an *ngFor loop and selecting an HTML tag

I am encountering an issue with [(ngModel)], as it is syncing all my selections to the same variable. My variable is selectStations = []; Therefore, when I choose an option in one select element, it updates all select elements to have the same selected o ...

htmlangularformsdrop-down-menungmodel

Customizing PrimeReact Styles

I've been on a quest to find the perfect solution for customizing the default 'Nova' theme used in Prime React. While I know there is a theme designer available for purchase, I'd prefer not to go that route. In the past, I found myself ...

htmlcssreactjssassprimereact

Leveraging Javascript within MVC3, either on a master page or child page

I'm currently developing a web application utilizing MVC3 and I am curious about the best practices for incorporating JavaScript. Specifically, I am uncertain about whether to include JavaScript in the master page as well as in individual child pages. ...

javascripthtmlasp.net-mvc-3

Unable to choose anything within a draggable modal window

Can someone please assist me? I am struggling to figure this out. I can't select text inside the modal or click on the input to type text into it. I suspect it may be due to z-index issues, but I'm having trouble locating them. var currentZ = n ...

javascripthtmlcssangularjs

Is there a way to substitute a custom <form> element for the default <form> in an already existing plugin?

I am currently in the process of customizing a theme and a plugin within WordPress. In the plugin, there is a button that allows users to click on it to bring up a form where they can ask questions. While I want users to post their questions through this p ...

phphtmlcsswordpressfooter

Navigating in a Curved Path using Webkit Transition

Currently, I am working on a simple project to learn and then incorporate it into a larger project. I have a basic box that I want to move from one position to another using CSS webkit animations and the translate function for iOS hardware acceleration. I ...

javascriptanimationwebkitcssmotion

Display information from Node.js on an HTML page

I am working on a nodejs project where I need to login on one page and display the result on another page using expressjs. Below is my code for login.ejs: <!DOCTYPE html> <html lang="en" dir="ltr"> <body> <form method="PO ...

javascripthtmlnode.jsexpress

What could be the reason for box-shadows not appearing properly on Safari browsers?

Why are box shadows with decimals sometimes not displayed in Safari? Is there a solution to this issue? Here's an example of the code: div { width: 200px; height: 200px; box-shadow: 0px 0.0351725rem 0.0351725rem 0px, 0px 0px 0px 0.0175862re ...

htmlcsssafaribox-shadow

What impact do varying screen sizes have on the width of CSS?

Can someone explain what this CSS code actually does: .class { width: 800px; } I've noticed that on my laptop screen, the element appears to be exactly 800 pixels wide. However, when I view it on my tablet screen, it shows up as 1600 pixels wide. Th ...

htmlcssresponsive-design

Difficulty in placing the logo within the navigation menu

Currently working on developing a website and encountering challenges with positioning the logo within the navigation bar. A test version of the site can be found at The logo is not centered properly in its designated space, especially in smaller browser ...

htmlcssnavbar

In search of a way to verify if a string contains a specific word

I'm currently working on a dynamic tooltip feature. My goal is to detect multiline tooltips by checking if my data includes \r. The code snippet below is an example of how I am trying to analyze my description, but so far, I have been unsuccessfu ...

javascriptjqueryasp.nethtml

React and Material UI: troubleshooting problems with layout columns

I'm working on a project with three columns and I want to include a column for removing each row. Is it possible to add a "removing" column on the right? If so, how can I go about doing it? VIEW CODESANDBOX: HERE const CustomTableRow = ({ row, index ...

javascripthtmlcssreactjsmaterial-ui