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 in HTML by Ashwini
• 1,160 points
35 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 by Deepak
• 940 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 in HTML by Tejashwini
• 1,960 points
101 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,780 points
217 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 in HTML by Ashwini
• 1,160 points
31 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 in HTML by Tejashwini
• 540 points
14 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 in CSS by Edureka
• 11,040 points
38 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 in CSS by Edureka
• 9,540 points
27 views
0 votes
1 answer

Set cellpadding and cellspacing in CSS?

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

answered Jun 10 in CSS by Edureka
• 9,540 points
22 views
0 votes
0 answers

Set cellpadding and cellspacing in CSS?

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

Jun 8 in HTML by Ashwini
• 1,160 points
38 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 in HTML by Deepak
• 940 points
257 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 in HTML by Deepak
• 940 points
38 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP