CSS anchor text-align its content center not working - css

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>

Answer 2

Use display: inline-block; on the div to allow that:
a {
display: block;
text-align: center;
background: green;
}
div {
width: 100px;
background: red;
display: inline-block;
}
<a>
<div>
Hello World
</div>
</a>

Answer 3

Set div style Margin 0 auto
div {
width: 100px;
background: red;
margin: 0 auto;
}
a {
display: block;
text-align: center;
background: green;
}
<a>
<div>
Hello World
</div>
</a>

Answer 4

There are quite a few ways in which this can be achieved; the following code snippet shows a few of those approaches with explanatory comments:
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
main {
display: grid;
gap: 1em;
margin-block: 1em;
margin-inline: auto;
width: clamp(10em, 70vw, 1000px);
}
/* styling all <a> elements: */
a {
border: 1px solid lightblue;
padding-block: 0.25em;
}
/* styling all <div> elements: */
div {
border: 1px solid palegreen;
text-align: start;
}
/* using the ::before pseudo-element to
show the 'Hello World string: */
div::before {
content: "Hello World";
display: block;
text-align: center;
}
/* styling all <code> elements: */
code {
/* display: block purely to allow for
padding to be applied on the inline
axis: */
display: block;
/* to show the code as it was written,
including line-breaks: */
white-space: pre;
padding-inline: 1em 0.5em;
}
a.withMarginInline div {
/* using the margin-inline of 'auto' to move the <div>
to the center of its parent: */
margin-inline: auto;
/* setting the width of the <div> to a width which fits its
content, allowing lines to wrap as needed: */
width: fit-content;
}
/* retaining the 'text-align' property of 'center': */
a.withDisplayInlineBlock {
text-align: center;
}
/* displaying the <div> as an inline-block, which allows it
to be positioned as an inline element, but also allows it
to have specified width, height, margin...: */
a.withDisplayInlineBlock div {
display: inline-block;
}
/* setting the <a> parent to flex-box layout: */
a.withDisplayFlex {
display: flex;
/* centering the content of that element (horizontally),
if vertical centering is required then
'align-content: center' could be added, or
'place-content: center' used in place of both: */
justify-content: center;
}
a.withDisplayGrid {
/* using grid layout: */
display: grid;
/* positioning the content vertically and horizontally
in the centre: */
place-content: center;
}
<main>
<a href="#" class="withMarginInline">
<div>
<code>
childElement {
margin-inline: auto;
width: fit-content;
}
</code>
</div>
</a>
<a href="#" class="withDisplayInlineBlock">
<div>
<code>
parentElement {
text-align: center;
}
childElement {
display: inline-block;
}
</code>
</div>
</a>
<a href="#" class="withDisplayFlex">
<div>
<code>
parentElement {
display: flex;
justify-content: center;
}
</code>
</div>
</a>
<a href="#" class="withDisplayGrid">
<div>
<code>
parentElement {
display: grid;
place-content: center;
}
</code>
</div>
</a>
</main>
JS Fiddle demo.
References:
align-content.
border.
box-sizing.
clamp.
content.
display.
justify-content.
margin.
margin-block.
margin-inline.
padding.
padding-block.
padding-inline.
place-content.
text-align.
white-space.
width.