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
15 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
• 760 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,660 points
22 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,740 points
204 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
8 views
0 votes
0 answers

How to use HTML to print header and footer on every printed page of a document?

Can HTML pages be printed with unique ...READ MORE

Jul 12 in HTML by Ashwini
• 1,160 points
13 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
• 9,940 points
19 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
13 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
12 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
22 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
• 760 points
20 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
• 760 points
15 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