CSS anchor text-align its content center not working

Question

Try to align the div in the center of the link, not working. still align left.

a {
  display: block;
  text-align: center;
  background: green;
}

div {
  width: 100px;
  background: red;
}

<a>
  <div>
    Hello World
  </div>
</a>

Answer 1

Set the margin to auto on the div and remove the text-align rule on the anchor:

a {
  display: block;
  background: green;
}

div {
  width: 100px;
  background: red;
  margin: auto;
}

<a>
  <div>
    Hello World
  </div>
</a>