What is the best way to use CSS to align an HTML form input box and buttons to the center?

Question

What is the best way to use CSS to align an HTML form input box and buttons to the center?

Looking to replicate the design of the Google homepage on a certain HTML page. Struggling with centering the search bar and buttons using CSS.

div.search {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

<div class="search">
  <form action="https://google.com/search">
    <br><input type="text" name="q"></br>
    <input type="submit" value="Google Search">
    <input type="submit" value="I'm Feeling Lucky">
  </form>
</div>

Struggling with getting the search box and buttons to be centered correctly.

html css

Answer 1

Answer №1

You're attempting to center internal elements using margin, but you are applying the styles to their parent element.

If you wish to center internal elements using margin, you must apply it directly to those elements, not the parent.

Here's what you can do:

Add margin: 0 auto; to all your input fields (to center them).
Change the display style of the search bar to display: block (so it takes up the entire line)
Set the submit buttons' display property to display: inline-block; (so they appear inline)
Delete the unnecessary <br> tags around your search input field.

Updated Code:

div.search{
  width: fit-content;
}

input[type="text"]{
  display: block;
}

input[type="submit"]{
  display: inline-block;
}

input{
  margin: 0 auto;
}

<div class="search">
  <form action="https://google.com/search">
    <input type="text" name="q">
    <input type="submit" value="Google Search">
    <input type="submit" value="I'm Feeling Lucky">
  </form>
</div>

Answer 2

You're attempting to center internal elements using margin, but you are applying the styles to their parent element.

If you wish to center internal elements using margin, you must apply it directly to those elements, not the parent.

Here's what you can do:

Add margin: 0 auto; to all your input fields (to center them).
Change the display style of the search bar to display: block (so it takes up the entire line)
Set the submit buttons' display property to display: inline-block; (so they appear inline)
Delete the unnecessary <br> tags around your search input field.

Updated Code:

div.search{
  width: fit-content;
}

input[type="text"]{
  display: block;
}

input[type="submit"]{
  display: inline-block;
}

input{
  margin: 0 auto;
}

<div class="search">
  <form action="https://google.com/search">
    <input type="text" name="q">
    <input type="submit" value="Google Search">
    <input type="submit" value="I'm Feeling Lucky">
  </form>
</div>

What is the best way to use CSS to align an HTML form input box and buttons to the center?

Answer №1

You're attempting to center internal elements using margin, but you are applying the styles to their parent element.

Updated Code:

Similar questions

Utilizing SVG elements for interactive tooltips

Switch between hiding and showing the DIV element flaw

Can someone explain the purpose of `svg:not(:root) {overflow: hidden}` in simple

How can you change the width of <td> and <th> elements?

Unable to specify the width of my website using full-width in Bootstrap

Issues with CSS columns in Firefox version 22 have been causing some problems

Is there a way to apply border-radius to the header of a table in Bootstrap 5?

Mysterious obsidian container lurking in the background of the video on Chrome version 67.0.3396

Properly aligning sub-divs within a parent div using CSS

triggering a button click event in HTML

Activating development mode for LessCSS in Node.js

The align-middle Bootstrap class does not seem to be working within the specified div

Angular 9: The instantiation of cyclic dependencies is not allowed

What is the best way to evenly space out divs filled with images in a horizontal layout?

Creating a dynamic visual effect with image overlap in the Sencha Touch carousel

How can I implement a feature in Django where clicking on a form will automatically clear the initial text within it?

How can we use jQuery to target an element based on the text content of the one preceding it?

The Zoom CSS property seems to be experiencing some issues on the Firefox browser

The implementation of classList.toggle in my JavaScript code is not functioning as expected

Determine the image's position in relation to its parent element while factoring in any vertical offset