Swal弹窗问题：文本居中异常与按钮均等尺寸调整求助

我来帮你搞定这个SweetAlert的样式问题！针对你遇到的文本左侧间隙过大、按钮尺寸不均的情况，我们可以通过调整CSS样式来完美解决：

1. 修复文本左侧间隙过大 #

默认的.swal-text带有左侧内边距（padding-left），这就是导致文本看起来偏右、左侧间隙大的核心原因。我们可以重置这个内边距，同时保持文本居中：

.swal-text {
  font-size: 20px;
  text-align: center;
  padding-left: 0; /* 移除默认左内边距 */
  padding-right: 0; /* 可选：统一左右内边距，让居中效果更对称 */
}

2. 让Cancel和OK按钮尺寸均等 #

SweetAlert的按钮容器默认是flex布局，我们可以利用flex属性让两个按钮平分可用空间，同时调整按钮的内边距和最小宽度来保证尺寸完全一致：

/* 让按钮容器使用flex布局，按钮平分空间 */
.swal-button-container {
  display: flex;
  gap: 10px; /* 按钮之间的间距，可根据需求调整 */
}

.swal-button {
  flex: 1; /* 每个按钮平分容器宽度 */
  min-width: 80px; /* 保证按钮不会太窄，适配不同文本长度 */
  padding: 8px 16px; /* 统一按钮内边距，让按钮高度一致 */
}

完整可运行代码示例 #

把这些样式整合到你的代码中，最终效果就会符合预期：

<html>
  <head>
    <style>
      .swal-text {
        font-size: 20px;
        text-align: center;
        padding-left: 0;
        padding-right: 0;
      }
      .swal-modal {
        width: 400px;
        height: 150px;
      }
      .swal-button-container {
        display: flex;
        gap: 10px;
      }
      .swal-button {
        flex: 1;
        min-width: 80px;
        padding: 8px 16px;
      }
    </style>
  </head>
  <body>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script>
      swal({ 
        text: "Are you sure ?", 
        buttons: ["Cancel", true], 
      });
    </script>
  </body>
</html>

这样调整后，文本会完全居中，左侧不会有多余间隙，两个按钮也会拥有均等的宽度和一致的尺寸啦！

内容的提问来源于stack exchange，提问作者kavya