How can you center two inline form buttons using HTML and CSS?

I am completely new to HTML and CSS. I am currently attempting to center two form buttons on a page. Below you'll find the code snippet that I have been working with:

* {
  font-family: arial, sans-serif;
}

body {
  display: flex;
  align-items: column;
}

.buttons {
  background-color: #f8f9fa;
  border: 1px solid #f8f9fa;
  border-radius: 4px;
  font-size: 14px;
  margin: 11px 4px;
  padding: 0 16px;
  line-height: 27px;
  height: 36px;
  min-width: 54px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  display: inline-block;
}

.search_area {
  display: flex;
  color: rgba(0, 0, 0, .87);
  border: 1px solid #ddd;
  width: 100%;
  height: 34px;
  font-size: 16px;
  border-radius: 25px;
}

nav {
  display: flex;
  margin-right: 30px;
  margin-top: 15px;
}

.search_box {
  text-align: center;
  display: block;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Google</title>
  <link rel="stylesheet" href="google.css">
</head>

<body>
  <nav>
    <a href="images.html">Image Search</a>
    <a href="advanced.html">Advanced Search</a>
  </nav>

  <form class="search" action="https://www.google.com/search">
    <img id="logo" src="logo.png" alt="Google logo">
    <div>
      <input name="q" type="text" class="search_area">
    </div>
    <input type="submit" value="Search Google" class="buttons">
    <input type="submit" value="I'm Feeling Lucky" class="buttons">
  </form>
</body>

</html>

Upon inspection, it is evident that the two buttons positioned below the search bar are aligned to the left. Despite applying text-align: center, the buttons do not seem to be centralized as expected.

Any suggestions on how I could successfully center these two buttons on the screen?

Thank you in advance!

htmlcssflexboxcss-selectors

Answer №1

An example of an update:

<html lang="en">
                    <head>
                        <title>Bing</title>
                        <link rel="stylesheet" href="bing.css">
                    </head>

                    <body>
                        <nav>
                            <a href="images.html">Image Search</a>
                            <a href="advanced.html">Advanced Search</a>
                        </nav>

                        <form class="search" action="https://www.bing.com/search">
                            <div style="
                "><img id="logo" src="bing_logo.png" alt="Bing logo" style=""></div>
                    <div style="">
                            <div style="display: flex;align-content: center;">
                                <input name="q" type="text" class="search_area">
                            </div>
                    <div style="">
                                <input type="submit" value="Search Bing" class="buttons">
                                <input type="submit" value="I'm Feeling Lucky" class="buttons">               
                        </div>
                    </div>
                </form>
                    
                </body></html>

CSS:

*{
                    font-family: helvetica, sans-serif;
                }

                body {
                    /*display: block;
                    align-items: row;*/
                }

                .buttons {
                    background-color: #f0f8ff;
                    border: 1px solid #f0f8ff;
                    border-radius: 6px;
                    font-size: 16px;
                    margin: 10px 5px;
                    padding: 0 18px;
                    line-height: 30px;
                    height: 38px;
                    min-width: 56px;
                    text-align: center;
                    cursor: pointer;
                    user-select: all;
                    display: inline-block;
                }


                .search_area {
                    display: flex;
                    color: rgba(0, 0, 0, .75);
                    border: 1px solid #ddd;
                    width: 100%;
                    height: 36px;
                    font-size: 18px;
                    border-radius: 27px;
                }

                nav {
                    display: flex;
                    margin-right: 40px;
                    margin-top: 20px;
                }

                form{
                    display: table;
                    margin-left: auto;
                    margin-right: auto;
                }

                .search_box {
                    text-align: center;
                    display: block;
                }

Answer №2

Insert this CSS snippet:

Paste it into your code and witness the transformations.

I successfully disabled the body section, and it had the desired effect.

*{
    font-family: arial, sans-serif;
}

body {
    /*display: flex;
    align-items: column;*/  /*I have commented out the body CSS rules*/
}

.buttons {
    background-color: #f8f9fa;
    border: 1px solid #f8f9fa;
    border-radius: 4px;
    font-size: 14px;
    margin: 11px 4px;
    padding: 0 16px;
    line-height: 27px;
    height: 36px;
    min-width: 54px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    display: inline-block;
}


.search_area {
    display: flex;
    color: rgba(0, 0, 0, .87);
    border: 1px solid #ddd;
    width: 100%;
    height: 34px;
    font-size: 16px;
    border-radius: 25px;
}

nav {
    display: flex;
    margin-right: 30px;
    margin-top: 15px;
}

form{
    display: table;
    margin-left: auto;
    margin-right: auto;
}

.search_box {
    text-align: center;
    display: block;
}

Answer №3

When coding within your body tags, avoid utilizing display: flex as it may interfere with the functionality of text-align: center. Instead, for centering elements within your form tag, consider using the .search { margin: 0 auto; width: 50%} CSS class.

Below is an example of HTML code:

  <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>Google</title>
            <link rel="stylesheet" href="google.css">
    
        </head>
    
        <body>
            <nav>
                <a href="images.html">Image Search</a>
                <a href="advanced.html">Advanced Search</a>
            </nav>
    
            <form class="search" action="https://www.google.com/search">
                <img id="logo" src="logo.png" alt="Google logo">
                <div>
                    <input name="q" type="text" class="search_area"&‌​gt;
                </div>
    
                <div class="button">
                    <input type="submit" value="Search Google" class="buttons">
                    <input type="submit&q¬-uot; value="I'm Feeling Lucky" class="buttons">         
                </div>      
            </form>
        </body>
    </html>

And here is the corresponding CSS:

*{
    font-family: arial, sans-serif;
}

/* body{display: flex;align-items: column;}  */

.buttons {
    /* Button styling properties */
}

.button{
    /* Button alignment and styling attributes */
}


.search_area {
    /* Styling for search text input area */
}

.search{
    /* Centering and width adjustment for search element */
}

nav {
    /* Navigation menu styling properties */
}

.search_box {
    /* Styling for search box element */
}

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

Is there a way to position two images using CSS, with one in the upper right corner and the other in the lower right corner?

I'm trying to use CSS to align two images, one in the upper right position and the other in the lower right position. Can you help me with this? Below is the HTML markup: <th class="X" scope="col"> Time <input id="ORAAsc" class="up" type="i ...

htmlcss

Problem with stacking order in Internet Explorer 7

Our current issue involves a z-index problem with a div that should be positioned above another specific div. The div in question, named (house-over-banner), is set to absolute positioning, while the one below it is relative. Interestingly, everything dis ...

cssinternet-explorerz-index

What is the best way to grab the initial section of a website's text while using a WKWebView?

When working with a WKWebView, retrieving the webpage's title is simple using webView.title. However, obtaining the first paragraph of the webpage's content poses a challenge with no straightforward solution. Any tips or suggestions on how to ac ...

htmliosuiwebviewwkwebview

Enhancing ag-grid with alternating row group colors following row span

My data structure is shown below: https://i.stack.imgur.com/fy5tn.png The column spanning functionality in ag-grid is working for columns 1 and 2 as expected. However, I am looking to implement alternate row colors based on the values in column 2 (animal ...

javascriptpythoncssag-grid

Is there a way to make the product list view in Magento much more compact and smaller in size?

My issue is pretty straightforward. I find Magento's product display in list view to be too large for my liking. The images are bigger than necessary and each product takes up too much space. I want to resize the listing so that each product only occu ...

htmlcssmagento

Pointer Cursor in CSS

I am experiencing a strange issue. When I set the cursor attribute value directly as a string like return ( <Grid item> <Card sx={{ padding: "1rem", ":hover": { cursor: "pointer" ...

csstypescriptmaterial-ui

I am encountering an issue with opening a dropdown select option upon clicking in C# while using Selenium

I am encountering an issue while attempting to open the Register page from my account. The UI developer utilized Bootstrap code, and Bootstrap developers have included a JS function on click. However, when I execute this code, an error is thrown: "OpenQA.S ...

c#cssseleniumselector

Unable to retrieve file on Linux system through PHP

<?php // Ensuring that an ID is provided include('include/function.php'); if(isset($_GET['id'])) { // Retrieving the ID $id = intval($_GET['id']); // Validating the ID if($id <= 0) { die('Th ...

javascriptphphtmlmysqlcss

Customize URL based on selected button

My question may be a bit unclear, but I want to generate dynamic URLs that redirect users to specific pages based on the link clicked. For example: Parent page with links (a, b, c, x, y) User clicks on 'b' User is taken to a Node Page that play ...

javascriptjqueryhtmlcss

I am looking to create buttons that can switch between two different styles of a specific element, like an h1 tag, when clicked. However, instead of toggling

//In this HTML document, I am trying to achieve a functionality where my buttons can toggle the style of an h1 element between the colors yellow and purple when clicked. However, I have encountered an issue where the buttons disappear during a transition ...

javascripthtmljquerycss

jQuery deduct a value from a given value

i have a full duration that is divided into multiple sections, the user needs to input the duration for each section i would like the system to calculate and display the remaining duration from the full duration, regardless of whether the user fills out ...

javascriptjqueryhtml

What is the best way to achieve a column layout using Bootstrap?

I'm having difficulty adjusting the column width in Bootstrap columns to my specific needs. Check out this link for more information: : https://i.sstatic.net/Tvdef.png What I'm trying to achieve is to keep the label column width fixed while all ...

htmlcsstwitter-bootstrapbootstrap-4

Tips for changing the color of MUI TextField in React.JS?

Is there a way to customize the color of the TextField frame? It always shows up as black, making it hard to use in dark mode. I am looking to change the color of both the label and the input line. return ( <div align="center" ...

cssreactjsmaterial-ui

What is the best way to apply an active class to the parent li element when selecting an item within it? I want to achieve this effect

$(function() { var pgurl = window.location.href.substr(window.location.href .lastIndexOf("/") + 1); $("#nav ul li a").each(function() { if ($(this).attr("href") == pgurl || $(this).attr("href") == '') $(thi ...

javascriptjqueryhtmlcss

Add unique content to a div upon page reload

Whenever the page is refreshed, I would like to add a random anchor from an array into a specific div. Here's my current code: <div id="exit-offer" class="exit-offer-dialog"> <div class="offer-content" id="banner-load"> <bu ...

javascriptjqueryhtml

How to Center a Bootstrap List on Tablets and Mobile Devices

I've run into a bit of a snag and despite my efforts to research online, I'm unable to find a solution. Currently, I am utilizing bootstrap to develop my website. However, when I resize the page to a mobile or tablet size, my navbar list shifts ...

htmlcssbootstrap-4

Tips for resolving div overlap issues when utilizing a customized div within a container-fluid layout (Bootstrap)

As a newcomer to HTML, CSS, and Bootstrap, I encountered an issue with overlapping divs when resizing the screen to be smaller. The problem arose when using container-fluid as a section and implementing a customized div for the section header. Despite atte ...

htmlcssbootstrap-4

Items in Bootstrap row are not aligning in the center

Utilizing the Bootstrap 5 row property for responsiveness on my website, I encountered an issue where two divs placed next to each other did not align at the center of the webpage as expected. There was an unusual gap on the right that I couldn't elim ...

htmlcsstwitter-bootstrapbootstrap-4flexbox

Using Selenium to capture text for later validation and storage in a variable

Using Selenium in Visual Studio. I require assistance with developing two test cases. UPDATED: Extract a serial number from one text field and save it in Variable A. Retrieve another serial number from a different text field and store it in Variable ...

c#htmlvisual-studioseleniumvalidation

What is the best way to revert the Highcharts bar color back to its default color?

I am currently working with Highcharts version 4.1.10 In my bar chart, I have implemented a feature where the color of the bar changes when its value exceeds a certain threshold. //This function is called at regular intervals by a timeout function myTime ...

javascriptcsshighchartscolors