Does anyone know how to center a button by chance?

Question

I don't know if it would have anything to do with text-align but that doesn't make much sense considering it's a button, But if I'm wrong please let me know and maybe even drop an answer with an example?

Answer 1

You could also use CSS.

https://sololearn.com/compiler-playground/WoGxL05c9aAv/?ref=app

Answer 2

<p align="center"><button>xyz</button></p>

Answer 3

BroFar
nice. it's rarely seen, but putting a button inside a paragraph is actually legit.
not sure about align="center' though. it works, but I think it's deprecated. same with the center tag. we lose some easy to use things to progress...

it would be

<p style="text-align:center;"><button>xyz</button></p>

if we want to avoid align="center" .

Answer 4

Another alternative could be using

<button style="display: block; margin: 10px auto;">xyz</button>

this uses the button as a block and margin of 10px auto

setting the left and or right margins to auto tells the browser to automatically calculate and distribute the available horizontal space equally to the left and right sides. This has the effect of centering the element horizontally within its parent container. The 10px sets a top and bottom margin.

Answer 5

Rondell Nagassar
In addition, there are several more methods to align a button in center such as:-

`<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
<button>Click Me</button>
</div>
`
Where,
display: flex => make flex container
justify-content: center => center horizontally
align-items: center => center vertically
height: 100vh => fill screen vertically

Another way:-

`<div style="display: grid; place-items: center; height: 100vh;">
<button>Click Me</button>
</div>
`
Where,
display: grid => create grid layout
place-items: center => center both directions
height: 100vh => full viewport height

Answer 6

Ushasi Bhattacharya
it's deprecated. use css styling.

Answer 7

I agree. There are many ways to accomplish this task but the correct way to position elements in HTML5 is to use CSS 👍

Answer 8

Thank you, I'm going to try it now

Answer 9

https://www.sololearn.com/en/compiler-playground/WwS1k7adO29m

use display block and margin left / right auto on the button

Answer 10

Bob_Li , I think the align attribute does not give the desired output.