trying to align html button at the center of the my page

0 votes

I'm trying to align an HTML button exactly at the center of the page irrespective of the browser used. It is either floating to the left while still being at the vertical center or being somewhere on the page like at the top of the page etc..

I want it to be both vertically and horizontally centered. Here is what I have written right now:

<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">
   mybuttonname
</button> 
Aug 2, 2022 in HTML by Ashwini
• 5,430 points
492 views

1 answer to this question.

0 votes

For example:

HTML

<div>
  <button>Submit</button>
</div>

CSS

button {
  margin:auto;
  display:block;
}
answered Aug 4, 2022 by Deepak
• 980 points

Related Questions In HTML

0 votes
0 answers

CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

I have the following page, which contains ...READ MORE

Jul 19, 2022 in HTML by Tejashwini
• 3,820 points
980 views
0 votes
1 answer

How to align a <div> to the middle (horizontally/width) of the page?

Hello Kartik, position: absolute and then top:50% and left:50% places the top edge ...READ MORE

answered Apr 23, 2020 in HTML by Niroj
• 82,880 points
773 views
0 votes
0 answers

How to GET background color of a particular portion on the html page

I used Gradient to set the color ...READ MORE

Jul 26, 2022 in HTML by Ashwini
• 5,430 points
1,313 views
0 votes
0 answers

How to set the size of button in HTML?

On my HTML/JS page, I have a ...READ MORE

Aug 19, 2022 in HTML by Tejashwini
• 780 points
372 views
0 votes
0 answers

How can I vertically center a div element for all browsers using CSS?

I want to center a div vertically with CSS. ...READ MORE

Jun 22, 2022 in CSS by Edureka
• 13,620 points
449 views
0 votes
1 answer

Best way to center a <div> on a page vertically and horizontally?

The legitimate way to do that irrespective ...READ MORE

answered Jun 28, 2022 in CSS by Edureka
• 12,690 points
548 views
0 votes
1 answer

Set cellpadding and cellspacing in CSS?

For controlling "cellpadding" in CSS, you can ...READ MORE

answered Jun 10, 2022 in CSS by Edureka
• 12,690 points
513 views
0 votes
0 answers

Set cellpadding and cellspacing in CSS?

In an HTML table, the cellpadding and ...READ MORE

Jun 8, 2022 in HTML by Ashwini
• 5,430 points
415 views
0 votes
1 answer

How to trigger a file download when clicking an HTML button or JavaScript?

For the button you can do <form method="get" ...READ MORE

answered Aug 4, 2022 in HTML by Deepak
• 980 points
3,031 views
0 votes
1 answer

Linking to a specific part of a web page

This is only possible if the website ...READ MORE

answered Aug 4, 2022 in HTML by Deepak
• 980 points
467 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP