Centering button with css

trying to align html button at the center of the my page [duplicate]

I’m trying to align an HTML button exactly at the centre of the page irrespective of the browser used. It is either floating to the left while still being at the vertical centre or being somewhere on the page like at the top of the page etc.. I want it to be both vertically and horizontally be centered. Here is what I have written right now:

9 Answers 9

Basically, place your button into a div with centred text:

With the following styles:

There are many ways to skin a cat, and this is just one.

here i cannot use a seperate css file. Actually this is a XSL file where is embedded html code. There is only one button to be displayed as this is small test to see how the button appears. Hence, i cannot create another css file. If i create another css file for this button, then i need an XML, XSL and CSS file for this simple functionality. I will be using a seperate CSS for the future functionalities which are comples

See my edit, and this fiddle: You should be able to grab that CSS and put it inline: jsfiddle.net/7Laf8

Hi, the IE displays it to the extreme left but still being at the vertical center. But when i use your code in my file, inline, it displays fine on my page. I will have to check with other browsers too today evening. Thank you

@AshwinG you can’t center a button element without a wrapper. The only way is to use the body as a wrapper. This means everything gets centered. If you want non-centered elements, you’ll have to provide wrapper elements for those. I don’t think the extra div is worse than applying custom rules for navigation and other page elements that would otherwise be affected.

You can center a button without using text-align on the parent div by simple using margin:auto; display:block;

SEE IT IN ACTION: CodePen

Edit by author: This is a really out of date answer! Flexbox or grid are much better.

I’ve really taken recently to display: table to give things a fixed size such as to enable margin: 0 auto to work. Has made my life a lot easier. You just need to get past the fact that ‘table’ display doesn’t mean table html.

It’s especially useful for responsive design where things just get hairy and crazy 50% left this and -50% that just become unmanageable.

In addition if you’ve got two buttons and you want them the same width you don’t even need to know the size of each to get them to be the same width — because the table will magically collapse them for you.

(this also works if they’re inline and you want to center two buttons side to side — try doing that with percentages!).

Источник

How to use CSS to center the buttons?

The reason why you want to use CSS for styling instead of HTML tags, comes from a very important principle of all kinds of programming: Separation of concerns. You want to use HTML purely for structural objects in your web page, objects that you then can style and place purely with CSS. The reason for this is that as your project grows, keeping track of small «CSS-like fixes» (either inline-CSS or centre tags), where they are placed, and what does what, can get really difficult and frustrating for you as the developer. Therefore, try to keep all styling code in an external CSS document, all Javascript function declarations in another external document, and as pure HTML as possible in your other documents. You might not see the point for small projects, but this practice is a true lifesaver for more than trivial projects.

As to your other question: Why will

center the the button, while

That is because adding the class =»center» with the text-align:center to the a-element, will center the content inside the a-element, not the element itself. If you want center the whole a-element, you should encapsule the element with another tag, and center the content of that tag instead, like for instance:

This will center the content inside div-element. If the div element has full width, this would center the a-link in the middle.

Источник

How TO — Center a Button in DIV

Learn how to center a button element vertically and horizontally with CSS.

How To Center a Button Vertically

Example

.vertical-center margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
>

How To Center Vertically AND Horizontally

Example

.center margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
>

You can also use flexbox to center things:

Example

.center <
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
>

Tip: Go to our CSS Align Tutorial to learn more about aligning elements.

Tip: Go to our CSS Transform Tutorial to learn more about how to scale elements.

Tip: Go to our CSS Flexbox Tutorial to learn more flexbox.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

How to center a button within a div?

I suspect that he wants both vertical and horizontal centering. None of the solutions so far accomplish this. CSS is not very good at vertical centering =(.

13 Answers 13

Updated Answer

Updating because I noticed it’s an active answer, however Flexbox would be the correct approach now.

Vertical and horizontal alignment.

Just horizontal (as long as the main flex axis is horizontal which is default)

Original Answer using a fixed width and no flexbox

If the original poster wants vertical and center alignment its quite easy for fixed width and height of the button, try the following

for just horizontal alignment use either

-1 this is awful. Basically, you set the width to 100% and then the margin to -50. But is causes other problems, like the button rises above the containing element, and doesn’t work well with resizing.

Hey thanks for at least explaining your down vote @Imray , Also note, I said fixed width and height, not variable. So resizing isn’t a factor. «Basically» I set the width to 100px, not 100%, and margin to -50px which is half. This has been a pretty standard method for centering. I look forward to your answer though 🙂

Your welcs (sorry for the harshness, glad you have a sense of humor) I meant 100px. I didn’t realize you wrote «fixed», but still I think this answer won’t be good in most situations

Источник

How to center a button element using HTML and CSS

Last Updated Aug 15, 2022

To center an HTML element, you need to add certain CSS properties that will put the button at the center of your HTML web page.

Button center horizontally with text-align

The text-align property is used to specify the horizontal alignment of text in a block element.

One trick of this property is that it can also be used to set the alignment of children elements in a parent tag.

For example, suppose you have a tag that contains two buttons. You need to add text-align to the tag as follows:

Button center horizontally using margin auto
Alternatively, you can also set the button in the middle of the tag.
Set the display property to block and add margin: 0 auto to the tag as shown below:

This is useful when your button has no parent element.
How to center button horizontally and vertically
To center a horizontally and vertically, you can use a combination of display , justify-content , and align-items properties.
Suppose you have a as the container of the element.
Use css class to make your code tidy as follows:
 Next, create another CSS class rule with the align-items property and set it to center .
 
Also add the display property here so that you can center vertically without the center-h class.
 
To see the content centered vertically, let’s add one more class to set the element height to 500 :
 
Finally, add all the classes assigned to the CSS rule above to the containing tag as follows:
 
The output will be as shown below:

To center the button vertically but not horizontally, remove the center-h class:
Now you’ve learned how to center a
And that’s how you can center an HTML button element using CSS properties!
CSS is very useful for styling your web page elements, but it’s quite tricky to learn what rule to write and what property to use.
The guides I’ve written will help you to understand how to style HTML elements with CSS.
Learn JavaScript for Beginners 🔥
Get the JS Basics Handbook, understand how JavaScript works and be a confident software developer.
A practical and fun way to learn JavaScript and build an application using Node.js.

About
Hello! This website is dedicated to help you learn tech and data science skills with its step-by-step, beginner-friendly tutorials.
Learn statistics, JavaScript and other programming languages using clear examples written for people.
Search
Type the keyword below and hit enter
Tags
Click to see all tutorials tagged with:
Источник