What is the best way to align my two buttons in the center?

I'm having trouble aligning my two buttons to the center. Additionally, I'm not sure how to remove the gray color from inside the buttons.

Here is the code:

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Learn Elementary Math at Prodigies!</title>
        <link rel = "icon" type = "img/jpg" href = "img/prodigies.jpg"/>
        <link rel = "stylesheet" type = "text/css" href = "reset.css"/>
        <link rel = "stylesheet" type = "text/css" href = "style.css"/>
        <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,500&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap" rel="stylesheet">
    </head>

    <body>

        <nav>
            <ul>
                <li>
                    <a href = "signup.html">SIGN UP</a>
                </li> 
                <li>
                    <a href = "teachings.html"& homepagepro;TEACHINGS</a>
                </li>
                <li>

                    <a href = "documentation.html">DOCUMENTATION <img src = "file:///Users/axelpalomino/Desktop/dropdown%20icon.png" alt = "Dropdown Icon" width = "22" height = "19"/></a>
                    <ul>
                        <li>
                            <a href = "" >About</a>
                        </li>
                        <li>
                            <a href = "" >Contact</a>
                        </li>
                        <li>
                            <a href = "" >Credits</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href = "index.html">HOME</a>
                </li>
            </ul>
        </nav>
        <header>
            <h1>
                PRODIGIES
                <img src = "file:///Users/axelpalomino/Desktop/prodigies-logo.jpg" alt = "Prodigies-Logo" width = "60" height = "60"/>
            </h1>
        </header>

        
        <div class = "topic-text">
            <h3>
                Learn Elementary Math.
            </h3>

            <h3>
                Fun and Easy!
            </h3>
            
        </div>

        <div class = "page-text">
            <p>
                Learn and master Math from Grade 1 to Grade 5.
            </p>

            <p>
                We will show you all the tips and tricks to solve Math Problems faster!
            </p>
    
        </div>

        <button class = "button1">I am a Parent</button>
        <button class = "button2">I am a Student</button>
    </body>

</html>

documentation.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Learn Elementary Math at Prodigies!</title>
        <link rel = "icon" type = "img/jpg" href = "img/prodigies.jpg"/>
        <link rel = "stylesheet" type = "text/css" href = "reset.css"/>
        <link rel = "stylesheet" type = "text/css" href = "style.css"/>
        <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,500&display=swap" rel="stylesheet">
    </head>

    <body>

        <nav>
            <ul>
                <li>
                    <a href = "signup.html">SIGN UP</a>
                </li> 
                <li>
                    <a href = "teachings.html">TEACHINGS</a>
                </li>
                <li>
                    <a href = "documentation.html">DOCUMENTATION <img src = "file:///Users/axelpalomino/Desktop/dropdown%20icon.png" alt = "Dropdown Icon" width = "22" height = "19"/></a>
                    <ul>
                        <li>
                            <a href = "" >About</a>
                        </li>
                        <li>
                            <a href = "" >Contact</a>
                        </li>
                        <li>
                            <a href = "" >Credits</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href = "index.html">HOME</a>
                </li>
            </ul>
        </nav>

        <header class = "header_doc">
            <h1>
                DOCUMENTATION
            </h1>
        </header>
    </body>

</html>

teachings.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Learn Elementary Math at Prodigies!</title>
        <link rel = "icon" type = "img/jpg" href = "img/prodigies.jpg"/>
        <link rel = "stylesheet" type = "text/css" href = "rest.css"/>
        <link rel = "stylesheet" type = "text/css" href = "style.css"/>
        <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,500&display=swap" rel="stylesheet">
    </head>

    <body>

        <nav>
            <ul>
                <li>
                    <a href = "signup.html">SIGN UP</a>
                </li> 
                <li>
                    <a href = "teachings.html">TEACHINGS</a>
                </li>
                <li>
                    <a href = "documentation.html">DOCUMENTATION <img src = "file:///Users/axelpalomino/Desktop/dropdown%20icon.png" alt = "Dropdown Icon" width = "22" height = "19"/></a>
                    <ul>
                        <li>
                            <a href = "" >About</a>
                        </li>
                        <li>
                            <a href = "" >Contact</a>
                        </li>
                        <li>
                            <a href = "" >Credits</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href = "index.html">HOME</a>
                </li>
            </ul>
        </nav>
        
        <header>
            <h1>
                WHAT WILL I TEACH?
                <img src = "file:///Users/axelpalomino/Desktop/prodigies-logo.jpg" alt = "Prodigies-Logo" width = "60" height = "60"/>
            </h1>
        </header>

    </body>

</html>

signup.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Learn Elementary Math at Prodigies!</title>
        <link rel = "icon" type = "img/jpg" href = "img/prodigies.jpg"/>
        <link rel = "stylesheet" type = "text/css" href = "reset.css"/>
        <link rel = "stylesheet" type = "text/css" href = "style.css"/>
        <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,500&display=swap" rel="stylesheet">
    </head>

    <body>

        <nav>
            <ul>
                <li>
                    <a href = "signup.html">SIGN UP</a>
                </li> 
                <li>
                    <a href = "teachings.html">TEACHINGS</a>
                </li>
                <li>
                    <a href = "documentation.html">DOCUMENTATION <img src = "file:///Users/axelpalomino/Desktop/dropdown%20icon.png" alt = "Dropdown Icon" width = "22" height = "19"/></a>
                    <ul>
                        <li>
                            <a href = "" >About</a>
                        </li>
                        <li>
                            <a href = "" >Contact</a>
                        </li>
                        <li>
                            <a href = "" >Credits</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href = "index.html">HOME</a>
                </li>
            </ul>
        </nav>
        
        <header>
            <h1>
                SIGN UP
                <img src = "file:///Users/axelpalomino/Desktop/prodigies-logo.jpg" alt = "Prodigies-Logo" width = "60" height = "60"/>
            </h1>
        </header>

    </body>

</html>

style.css

body {
    background-color: rgb(48, 176, 235); /*The background color of the page*/
    color: rgb(199, 195, 195); /*The color of the words*/
    font-family: 'Poppins', sans-serif; /*The font family of the website*/
}

header{
    font-size: 30px; /*The font size of the header*/
    text-align: center; /* The alignment of the title, Prodigies*/
}

h1 {
    background-color: rgb(30, 109, 255); /*The background color of the header*/
}

footer {
    text-align: left;
  }
  
footer h3 {
    display: inline-block;
    font-size: 30px;
} 

* {
    margin: 0;
    padding: 0;
}

ul {

}

ul li {
  list-style: none;
  float: right;
  line-height: 90px;
  position: relative;
}

ul li a:hover {
    color: silver;
}

ul li ul {
    display: none;
    position: absolute;
    background-color: white;
    padding: 1px;
    border-radius: 0px 0px 4px 4px;
}

ul li:hover ul{
    display: block;

}

ul li ul li {
    width: 180px;
    border-radius: 4px;
}

ul li ul li a:hover {
    background-color: #f3f3f3;
    box-shadow: 0px 8px 16px 0px rgba(15, 98, 253, 0.2);
}

.topic-text{
    font-size: 38px;
    line-height: 86px;
    height: 190px;
    border: 3px solid rgb(48, 176, 235); 
    text-align: center;
    color: rgb(30, 109, 255);
}

ul li a {
    text-decoration: none;
    font-size: 25px;
    font-family: 'Poppins', sans-serif;
    color: rgb(238, 237, 237);
    padding: 0 20px;
    overflow: hidden;
    transition: 0.7s; 
  }

.page-text{
      text-align: center;
      font-size: 25px;
  }

.button1{
    text-decoration: none;
    border-radius: 80px;
    border: 19px solid white;
}

.button2{
    text-decoration: none;
    border-radius: 80px;
    border: 19px solid white;
    margin: 0;
    padding-right: 50px;
    padding-left: 50px;
}

Could someone please assist me with centering my two buttons and removing the gray background inside them?

htmlcss

Answer №1

try utilizing flexbox with a background-color attribute

#container{
display:flex;
justify-content:center;
margin-top:150px;
}
.button{
margin:5px;
background-color:green;
width:10vw;
height:10vh;}

a{
text-decoration:none;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Learn Elementary Math at Prodigies!</title>
        <link rel = "icon" type = "img/jpg" href = "img/prodigies.jpg"/>
        <link rel = "stylesheet" type = "text/css" href = "reset.css"/>
        <link rel = "stylesheet" type = "text/css" href = "style.css"/>
        <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,500&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap" rel="stylesheet">
    </head>

    <body>

        <nav>
            <ul>
                <li>
                    <a href = "signup.html">SIGN UP</a>
                </li> 
                <li>
                    <a href = "teachings.html">TEACHINGS</a>
                </li>
                <li>

                    <a href = "documentation.html">DOCUMENTATION <img src = "file:///Users/axelpalomino/Desktop/dropdown%20icon.png" alt = "Dropdown Icon" width = "22" height = "19"/></a>
                    <ul>
                        <li>
                            <a href = "" >About</a>
                        </li>
                        <li>
                            <a href = "" >Contact</a>
                        </li>
                        <li>
                            <a href = "" >Credits</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href = "index.html">HOME</a>
                </li>
            </ul>
        </nav>
        <header>
            <h1>
                PRODIGIES
                <img src = "file:///Users/axelpalomino/Desktop/prodigies-logo.jpg" alt = "Prodigies-Logo" width = "60" height = "60"/>
            </h1>
        </header>

        
        <div class = "topic-text">
            <h3>
                Learn Elementary Math.
            </h3>

            <h3>
                Fun and Easy!
            </h3>
            
        </div>

        <div class = "page-text">
            <p>
                Learn and master Math from Grade 1 to Grade 5.
            </p>

            <p>
                We will show you all the tips and tricks to solve Math Problems faster!
            </p>
    
        </div>
        <div id='container'>
        <button class = "button">I am a Parent</button>
        <button class = "button">I am a Student</button>
        </div>
        
        
        <div id='container2'> <a href = "documentation.html"> <button class = "button" href = "documentation.html">I AM A PARENT</button> <button class = "button">I AM A STUDENT</button> </a> </div>
        
        
        
    </body>

</html>

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

Experience the magic of playing HTML5 video within the sleek confines of an iPhone image

After coming across a similar inquiry on Stack Overflow (), I decided to create my own solution since the original answer lacked code details. The task at hand is to embed an HTML5 video within an iPhone image frame, like so: The image dimensions are 300 ...

htmlcsshtml5-video

Issues with the play() method in Javascript across Firefox, Safari, and IE 11 are causing functionality problems

I developed a basic video and audio player that smoothly fades out an introductory image and starts or stops playing an mp4 file upon click. Everything functions properly in Chrome, but unfortunately does not work in other major browsers. Despite checking ...

javascriptjqueryhtmlcss

Choose the camera when utilizing the navigate.getUserMedia() function

I am currently utilizing the navigate.getUserMedia() method to record video on my mobile device and perform additional processing on it. However, at the moment, it is only capturing video using the front camera. How can I make it switch to the rear facing ...

javascripthtmlhtml5-videovideo-processingnavigator

Determine the overall cost based on varying percentage increases for each step

I am currently working on developing a price estimation calculator. Here is the breakdown: For 1000 MTU, the price will be 0.035, resulting in a total of 35. For 2000 MTU, the price will be 0.034, making the total 67. For 3000 MTU, the price will be 0.03 ...

javascripthtmljquerycss

The selected jquery script is failing to function as intended

I'm currently implementing jQuery chosen in a select element to enhance user experience, however I'm facing an issue when attempting to copy the chosen div to another div using jQuery $(document).ready(function() { $(".chosen").chosen({}); ...

javascriptjqueryhtmlcssjquery-chosen

Display numerous lines (extracted from a MySQL database) in an HTML webpage

I am currently employing the following code to output multiple lines of text from a database $query_content= "select * from home "; $result_content= mysql_query($query_content,$con); while ($text = mysql_fetch_array($result_content)) { $content = $tex ...

phpmysqlhtmlecholines

Using the <noscript> tag for an individual element or a comparable alternative

So, I have a link labeled "Impressum" that when clicked, opens up the Impressum section. <a data-open="something">Impressum</a> <div class="reveal" id="something" data-reveal> <img src="images/reverseLogo.png"> <h1>Imp ...

javascriptjqueryhtml

A guide on extracting href containing ampersands using Gatling

When encountering a link with ampersands in the URL during a Gatling stress test, issues may arise due to Gatling interpreting it as an entity. What can be done to work around this? For instance: Let's say you come across a webpage that contains &l ...

htmlgatling

Ensure that the two background images are identical in size and content

Can someone assist me with achieving vertical equality for two background images like in this example image? Currently, I have the following styling applied: background-repeat: no-repeat, repeat-x, repeat-y; background-position: 925px center; However, t ...

cssimageimage-scaling

What is the process for linking HTML files to a Node.js/Express server backend?

As I delve into my school project, I have encountered a hurdle that has left me searching for a suitable solution. The project involves creating multiple HTML pages, styling them with CSS, adding functionality using JavaScript, and ultimately integrating b ...

htmlnode.jsmongodbexpress

Issue with Scrollspy Functionality in Bootstrap 4

Scrollspy feature isn't working in my code. <nav class="navbar navbar-expand-lg fixed-top navbar-dark" role="navigation"> <div class="container"> <a class="navbar-brand" href="#featured"><h1></h1></a> < ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-4

Changing the selection in the Angular Mat-Select dropdown causes the dropdown's position to shift

Issue with dropdown position: The dropdown should display below the select element, but when selecting the second value, it appears on top of the select element. I have removed any relevant CSS to troubleshoot, but the problem persists. See screenshots for ...

htmlcssangularangular-material

Issue with Jenkins displaying parameter values

Objective: Establish a conditional string parameter that spans multiple lines Method: I have set up two different jenkins parameters. Active choices parameter Active choices reactive reference parameter(Choice type: For ...

htmljenkinsgroovyjenkins-pipelinejenkins-groovy

Unable to make changes to the text within the textarea field

Currently, I am in the process of creating a script to streamline the tedious task of providing teaching feedback. To scrape data such as student names and classes, I am utilizing selenium/python. While everything is running smoothly, I have encountered an ...

javascriptpythonhtmlselenium

Developing a timetable feature using PHP

I am working on creating a schedule page that involves an SQL table named 'appointments' with columns for id, name, date, and time. My goal is to organize the data from this table into an HTML/CSS based table where all records with the same date ...

phphtmlmysqli

The concept of Border-Merging within Material Design Tables

Is there a way to implement the following border style in a Material Design Table: border-collapse: collapse; I tried adding a border to .mat-cell: .mat-cell { border: 1px solid; } However, in some instances, the border appears to be 2px. The reas ...

cssangularmaterial-design

Javascript continues to conceal my web background without my permission

After loading my webpage, I click on a link and the expected javascript runs as planned. However, once it completes and presents the results, the page goes blank to a white screen displaying only the outcomes. My goal is to have these results showcased o ...

javascripthtmlcss

Tips for setting height within a flexbox layout?

Is there a way to specify the height of rows in a flex wrap container so that text containers appear square on both smaller and larger screens? I want the sizing to be dynamic, adjusting as the window is resized. Check out this example on CodeSandbox Loo ...

cssreactjsmaterial-ui

Troubleshooting issues when utilizing flexbox in Firefox and Chrome version 48

Chrome 47 Behavior: The .scroll div scrolls correctly in Chrome 47, taking up 100% height using flex. Firefox Behavior: In Firefox, the .scroll div does not scroll properly and instead uses the content height. What is the solution that works across diffe ...

htmlcssscrollflexbox

rearrange the div elements by shifting each one into the one preceding it

Do you consider this a child and parent div relationship? <div class="container"> <p>content</p> </div> <div class="footer"><p>content</p></div> <div class="container"> <p>content</p> < ...

jqueryhtmlappend