How to align the button to the center?

Question

How to align the button in the center? Look at the code
input type="submit"

https://code.sololearn.com/Wi4AJ07MYJfc/?ref=app

Answer 1

The easiest way to center it without using a div is as follows:

input[type="submit"] {
display: block;
margin: auto;
}

Since the input are inline elements, you will need the first line 'display:block' (in that way they act as if they were not) in order to apply the margins.

Here you have more information about other ways to center elements:

https://www.w3schools.com/css/css_align.asp

Answer 2

Pro Tip : it becomes a headache often in big designs to align items , so always keep everything containerized using span and divs , or the new html5 containers like nav section article etc .

debugging becomes nightmarish sometimes, as we often try to find the solutions through trial and error.