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

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>

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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="#" >
    <div>
      <code>
childElement {
  margin-inline: auto;
  width: fit-content;
}
      </code>
    </div>
  </a>

  <a href="#" >
    <div>
      <code>
parentElement {
  text-align: center;
}

childElement {
  display: inline-block;
}
      </code>
    </div>
  </a>
  <a href="#" >
    <div>
      <code>
parentElement {
  display: flex;
  justify-content: center;
}
      </code>
    </div>
  </a>
  <a href="#" >
    <div>
      <code>
parentElement {
  display: grid;
  place-content: center;
}
      </code>
    </div>
  </a>
</main>

JS Fiddle demo.

References: