In this tutorial we will show you the solution of how to center a button in CSS, how do you use CSS and HTML to centre a block or inline-block button element?
Making the button centre can be difficult at times, as CSS offers a variety of options. It allows you to control the layout of all of the page's elements.
We'll learn how to centre a button in CSS in this article.
Step By Step Guide On How To Center A Button In CSS :-
We can horizontally centre the button element using the CSS align-items property and the value centre. This method is not great as it doesn't work all the time.
A flexbox was used to centre a button. If you're currently utilising flexbox on a web page and the button is inside the parent element, this method is great. To centre the button horizontally and vertically, utilise the flexbox attributes.
While we may use the CSS property justify-content in conjunction with the value centre to vertically centre the button element. If we want a button element to be centred both horizontally and vertically, we must use the CSS properties justify-content and align-items, as well as the value centre.
In the example below, we will see how to centre a button in CSS
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div>
<button>Sign Up</button>
</div>
</body>
</html>
- To begin, type <! DOCTYPE html> tells the web browser that the file is in HTML format.
- The <html> element, on the other hand, is used to signal the start of HTML content.
- The < head> tag now contains the information about web pages. The <title> element is used in this tag to provide a web page title. A good example of paired tags is the <head> and <title> tags. As a result, both have the </head> and </title> closing tags.
- A <style> tag was utilised in the head tag. To activate flexbox capabilities, we've added display: flex to the parent element of a button.
- After that, we added justify-content: centre to ensure that the button is centred.
- The <body> element is used to define the content of a webpage. This is where all of the stuff for the website will be written. The parent element of the button in the example below is div. The <button> tag has been specified here.
- The </body> and< /html> tags are used to close the <body> and <html> tags, respectively.
Besides from that, there are a number of other options, which are described below. The following approaches can be used to centre the button:
- text-align: centre - The text-align attribute of the parent div tag is set to the centre.
- margin: auto - The margin property's value is set to auto.
- show: grid - By setting the grid as the value of the display property.
Conclusion:-
You can quickly centre the button on your web pages if you have some basic HTML and CSS expertise. This will assist you in creating button layouts and making your website stand out.
Follow the above steps and leave your questions in the comments section below. I hope this tutorial on how to center a button in CSS helps you.
About Amruta
