How to center heading in HTML

[Joshcanread]

I'm on this shitty website called "Grok" to learn how to code and its like "center the heading" and if I use the <center> thing its like yo you cant do thats its illegal. It wants me to make the Left and Right margins in the style like this

}
h1 {
  line-height: 1.6;
   margin-left: auto;
    margin-right: auto;

}

It works for the P that I have under it but with the h1 it just doesn't want to work

[myselfolli]

3 minutes ago, Joshcanread said:

I'm on this shitty website called "Grok" to learn how to code and its like "center the heading" and if I use the <center> thing its like yo you cant do thats its illegal. It wants me to make the Left and Right margins in the style like this

}
h1 {
  line-height: 1.6;
   margin-left: auto;
    margin-right: auto;

}

It works for the P that I have under it but with the h1 it just doesn't want to work

Well it kinda depends on the rest of the webpage you're doing it in.

 

For example:

<style>
  .container {
    display: flex;
    justify-content: center;
	align-items: center;
  }
</style>

<div class="container">
  <h1>Test123</h1>
</div>

Would work. Or:

 

<style>
  .container>h1 {
    margin: 0 auto;
  }
</style>

<div class="container">
  <h1>Test123</h1>>
</div>

 

should kinda do the same thing. Can we get some more inf?

[Joshcanread]

I will test it quickly

[Joshcanread]

3 minutes ago, myselfolli said:

Well it kinda depends on the rest of the webpage you're doing it in.

 

For example:

<style>
  .container {
    display: flex;
    justify-content: center;
	align-items: center;
  }
</style>

<div class="container">
  <h1>Test123</h1>
</div>

 Would work. Or:

 

<style>
  .container>h1 {
    margin: 0 auto;
  }
</style>

<div class="container">
  <h1>Test123</h1>>
</div>

 

should kinda do the same thing. Can we get some more inf?

yeah it doesn't like it at all I will DM you all the info

[duncannah]

text-align: center;

You can either set this to the h1 or the container

Edited March 26, 2019 by duncannah

[JacobFW]

Pro tip for trying to get shit aligned in html:  make sure all sharp objects are out of arm's reach.  You will be tempted to use them on yourself.

[fringie]

You can't margin 0 auto when using containers for this (well you might be able to, but it's a pain for literally no reason). Use text-align if possible.

 

Example: https://jsfiddle.net/w941xvz2/