How to make h1 tag center with its actual width

Question

I need to make h1 tag center and also need to make a border around it. To prevent taking up more width I give display: inline-block but the tag does not respond to text-align: center then.

h1 {
  text-align: center;
  border: 1px solid;
  display: inline-block;
}

<div class="container">
  <h1>This is the Title</h1>
</div>

Answer 1

You can use display: table on heading. This will make heading to have width depending on its content while it will remain a block level element as well. And you can center it using margin: 0 auto property.

.heading {
  border: 1px solid black;
  display: table;
  margin: 0 auto;
  padding: 5px;
}

<h1 class="heading">Heading 1</h1>