Center link within a div

HTML & CSS
1

I am trying to center the x inside the div.

https://jsfiddle.net/ebakdq6r/

.blog-pager {
  max-width: 72px;
  height: 52px;
  border: 1px solid #0059dd;
  margin: 30px auto;
    background: linear-gradient(45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px),
    linear-gradient(-45deg,
      transparent,
      transparent 7px,
      rgb(113, 121, 126) 7px,
      rgb(113, 121, 126) 7.5px,
      transparent 7.5px,
      transparent 10px);
  background-size: 10px 10px;
}


a {
  position: relative;
  margin: 10px auto 0;
  width: 37px;
  height: 37px;
  background: black;
  border-radius: 50%;
  border: 5px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeInExit 3s ease-in 0s forwards;
  opacity: 0;
  pointer-events: none;
}

@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }

  100% {
    pointer-events: initial;
    opacity: 1;
  }
}

a::before,
a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 5px;
  background: red;
  transform: rotate(45deg);
}

a::after {
  transform: rotate(-45deg);
}

<div class="blog-pager">
  <a title="Exit" aria-label="Close"></a>
</div>
2

The parent div needs display:flex;align-items:center and the a element needs the margin removed or it will be offset.

3

https://jsfiddle.net/sLjhb2f9/1/

  display: flex; /* Add this */
  align-items: center; /* Add this */
  justify-content: center; /* Add this */
1 Like
4

Instead of those on the div you could have just used margin:auto on the a element but both will work and both are correct.

5

display: flex; /* Add this */

Would still be needed.

6

Yes because that allows auto margins on the child flex-item to center everything,

7

Adding margin:auto; is redundant then?

It’s at the bottom here and is working.

auto is needed.

https://jsfiddle.net/bdLnc461/

8

I already explained that you can use either or.

Either use both these on the div:

 align-items: center; 
 justify-content: center;

Or instead just use margin:auto on the a element.

Both will do the same but only one version is needed.

Note you have the margin property twice in that anahor rule so remember to delete them both if you use the first method or kust keep margin:auto if you use the second method.

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.