Center CSS X button

Question

I have bee trying to do a close button using CSS in order to close a tag. I have done this using a compination of a pattern described here: Patterns for Closebuttons, and a css only pattern for creating an X Close Button using CSS.

Now to my question: I can't figure out why the X is not entierly centered. If I change the placement to 50% of whatever width I'm using for the lines it seemes fine, thus I come to the conclusion it has to have something to do with the width of the lines.

I'm writing here to see if someone could explain this to me.

'HTML
<button type="button" aria-label="Close">
  <span aria-hidden="true" class="close"></span>
</button>

'CSS
button {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  padding: 0px;
  background-color: rgb(192,192,192);
  border: none;
  color: white;
 text-decoration: none;
 height: 150px;
 width: 150px;
 border-radius: 50%;
}
button:hover {
  background-color: rgb(146, 146, 146);
  cursor: pointer;
}

.close {
  position: relative;
  /* right: 10px; */
  width: 60%;
  height: 60%;
}
.close:before, .close:after {
  position: absolute;
  content: ' ';
  height: 100%;
  width: 20px;
  background-color: rgb(255, 255, 255);
}
.close:before {
 transform: rotate(45deg);
}
.close:after {
  transform: rotate(-45deg);
}

I created a codepen for simplicity: Codepen link

Everything looks fine but the lines just need to be positioned correctly. https://i.stack.imgur.com/MxiYj.png — GucciBananaKing99, Apr 28 '21 at 12:53
You just need to negatively compensate half the width of those pseudo elements. — prettyInPink, Apr 28 '21 at 13:00

CapitanFindus · Accepted Answer · 2021-04-28T13:12:20.947

Just add flexbox to the .close class and you're ready to go

.close {
  position: relative;
  width: 100%;
  height: 60%; // 100% means that both lines will take the entire space
  display: flex;
  align-items: center;
  justify-content: center;
}

The width of the .close:before, .close:after CSS rule is actually letting both lines "expand" horizontally, starting from the center.

But, as they are being rotated, their starting position is not the same as if they were not rotated, so that's why their alignment becomes non-centered. You can inspect the item and you will see that the actual box has an empty space, which is the "rotated width" empty space.

Consider a x = 0 coordinate (0px from CSS box left margin) which is the horizontal starting point of the CSS box; rotating elements will make content to start at x = ? (usually half of the content width)

You could solve this issue also by setting a negative margin-left with its value being half the width, but using flexbox will require much less maintenance (just imagine working with UI/UX guys telling you to change its dimensions)

@PatrickBender please check my updated answer, I hope it will make things clearer :) — CapitanFindus, Apr 28 '21 at 13:12

score 1 · Answer 2 · answered Apr 28 '21 at 12:56

1

Add This CSS left:50%; margin-left:-10px; on .close:before, .close:after

.close:before, .close:after {
  position: absolute;
  content: ' ';
  height: 100%;
  width: 20px;
  background-color: rgb(255, 255, 255);
  left:50%;
  margin-left:-10px;
}

answered Apr 28 '21 at 12:56

Lalji Tadhani

14,041
3
23
40

score 1 · Answer 3 · answered Apr 28 '21 at 12:57

1

Hello there try to add this to your span class .close:

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

You should not use right or left when your attribute is relative.

answered Apr 28 '21 at 12:57

DUTTOO Chris

85
6

Thanks, missed that on the span just had it on the button. Any ideas why its not centered to begin with? – Patrick Bender Apr 28 '21 at 13:04
1

http://image.noelshack.com/fichiers/2021/17/3/1619615435-capture-d-ecran-2021-04-28-a-15-08-49.png If you check the screen, your span is centered you can see it, but not your things inside of it. – DUTTOO Chris Apr 28 '21 at 13:10

Center CSS X button

3 Answers3