1

According to Are H1,H2,H3,H4 tags block or inline elements?

h1, h2, etc are block elements

I am trying to center an h1, but margin: 0 auto does not work.

This confuses me because according to What is the meaning of `auto` value in a CSS property.

a block element with margin: 0 auto will have the left and right margins increased until it becomes centered along the y-axis of the viewport.

<h1 style="margin: 0 auto">Is this centered?</h1>

What am I missing?

Lee Taylor
  • 7,761
  • 16
  • 33
  • 49
csguy
  • 1,354
  • 2
  • 17
  • 37

2 Answers2

2

The quote you reference with regards to margin: auto applies only in the case where you specify the width of a block element, since block elements by default will take up 100% of width. Therefore you should use the css text-align property in this case. (text-align: center).

see sharper
  • 11,505
  • 8
  • 46
  • 65
0

With them being block elements, their width is 100%, not the width of the text. You should just use text-align: center.

<h1 style="text-align: center">Is this centered?</h1>
Daniel A. White
  • 187,200
  • 47
  • 362
  • 445