居中 CSS X 按钮

大佬教程收集整理的这篇文章主要介绍了居中 CSS X 按钮，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决居中 CSS X 按钮？

开发过程中遇到居中 CSS X 按钮的问题如何解决？下面主要结合日常开发的经验，给出你关于居中 CSS X 按钮的解决方法建议，希望对你解决居中 CSS X 按钮有所启发或帮助；

我一直在尝试使用 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);
}
@H_696_10@@H_404_9@
为了简单起见，我创建了一个代码笔：Codepen link
 
解决方法
只需将 flexbox 添加到 .close@H_696_10@ 类，您就可以开始了

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

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

但是，当它们旋转时，它们的起始位置与未旋转时的起始位置不同，这就是为什么它们的对齐变得不居中的原因。您可以检查该项目，您会看到实际的盒子有一个空白区域，即“旋转宽度”的空白区域。
考虑一个 x = 0 坐标（距离 CSS 框左边距 0px），它是 CSS 框的水平起点；旋转元素将使内容从 x = 开始？ （通常是内容宽度的一半）
您也可以通过设置负值 @H_921_9@margin-left@H_696_10@ 来解决这个问题，它的值是 width@H_696_10@ 的一半，但是使用 flexbox 需要的维护要少得多（想象一下与 UI/UX 人员一起工作时告诉您改变它的尺寸）

      ,
        
在 left:50%; margin-left:-10px;@H_696_10@ 上添加此 CSS .close:before,.close:after@H_696_10@

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

      ,
        
您好，尝试将其添加到您的 span 类中。关闭：
display: flex;
justify-content: center;
align-items: center;
@H_696_10@

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


 
 
      

大佬总结

以上是大佬教程为你收集整理的居中 CSS X 按钮全部内容，希望文章能够帮你解决居中 CSS X 按钮所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。