居中 CSS X 按钮

Question

我一直在尝试使用 CSS 执行关闭按钮以关闭标签。 我使用此处描述的模式组合完成了此操作：Patterns for Closebuttons，以及用于创建 X Close Button using CSS 的纯 CSS 模式。

现在我的问题是： 我不明白为什么 X 不是完全居中的。 如果我将位置更改为我用于线条的任何宽度的 50%，它似乎很好，因此我得出的结论是它必须与线条的宽度有关。

我在这里写信是想看看是否有人可以向我解释一下。

'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);
}

为了简单起见，我创建了一个代码笔：Codepen link

Answer 1

只需将 flexbox 添加到 .close 类即可开始使用

.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;
}

.close:before, .close:after CSS 规则的宽度实际上是让两条线从中心开始水平“扩展”。

但是，当它们被旋转时，它们的起始位置与没有旋转时不同，这就是它们的对齐方式变得不居中的原因。您可以检查该项目，您会看到实际的盒子有一个空白空间，这是“旋转宽度”的空白空间。

考虑一个 x = 0 坐标（距离 CSS 框左边距的 0px），它是 CSS 框的水平起点；旋转元素将使内容从 x = 开始？ （通常是内容宽度的一半）

你也可以通过设置一个负值margin-left 来解决这个问题，它的值是width 的一半，但是使用 flexbox 需要更少的维护（想象一下，与 UI/UX 人员一起工作告诉你改变它的尺寸）

Answer 2

在 .close:before, .close:after 上添加这个 CSS left:50%; margin-left:-10px;

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

Answer 3

您好，尝试将其添加到您的跨度类中。关闭：

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

当你的属性是相对的时，你不应该使用 right 或 left。