如何在不支持 flex 的浏览器中居中按钮？

How to center button in browsers not supporting flex?

提问人：Hooman Bahreini 提问时间：8/21/2021 更新时间：8/24/2021 访问量：89

问：

我创建了以下页面，以通知用户他们的浏览器已过时。

table,
.modal-footer a {
  margin-left: auto;
  margin-right: auto;
}

td {
  width: 60px;
  text-align: center;
  color: #1a73e8;
}

a.browser-icon {
  width: 36px;
  height: auto;
  img {
    width: 32px;
    height: auto;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script>
    $(window).on('load', function() {
      $('#outdatedBrowserModal').modal('show');
    });
  </script>
  <style>

  </style>
</head>

<body>
  <div class="container">
    <div class='modal fade' id='outdatedBrowserModal' tabindex='-1' role='dialog' aria-hidden='true' data-backdrop="static" data-keyboard="false">
      <div class='modal-dialog modal-dialog-centered' role='document'>
        <div class='modal-content'>
          <div class='modal-header'>
            <h5 class='modal-title'>YOUR BROWSER IS OUT-OF-DATE!</h5>
          </div>
          <div class='modal-body'>
            <p>
              To continue using the site please use an up-to-date browser such as:
            </p>
            <table>
              <tr>
                <td>
                  <a class='browser-icon'>
                    <img src='https://www.shopless.co.nz/images/icons/chrome.svg' alt='Chrome' title='Chrome'></a>
                </td>
                <td>
                  <a class='browser-icon'>
                    <img src='https://www.shopless.co.nz/images/icons/safari.svg' alt='Safari' title='Safari'></a>
                </td>
                <td>
                  <a class='browser-icon'>
                    <img src='https://www.shopless.co.nz/images/icons/firefox.svg' alt='Firefox' title='Firefox'></a>
                </td>
                <td>
                  <a class='browser-icon'>
                    <img src='https://www.shopless.co.nz/images/icons/edge.svg' alt='Edge' title='Edge'></a>
                </td>
                <td>
                  <a class='browser-icon'>
                    <img src='https://www.shopless.co.nz/images/icons/opera.svg' alt='Opera' title='Opera'></a>
                </td>
              </tr>
              <tr>
                <td>Chrome</td>
                <td>Safari</td>
                <td>Firefox</td>
                <td>Edge</td>
                <td>Opera</td>
              </tr>
            </table>
          </div>
          <div class="modal-footer">
            <a href="https://browser-update.org/update-browser.html" class="btn btn-primary">UPDATE MY BROWSER NOW</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

问题是该页面在 Internet Explorer 中无法正确显示，如下所示：

enter image description here

有没有其他方法可以使页脚按钮居中？

HTML CSS 互联网浏览器 引导程序-4

评论

2赞 Temani Afif 8/21/2021
如果您想支持 IE，我会开始删除 Boostrap。从头开始编写一些基本的 CSS
1赞 Xudong Peng 9/1/2021
我可以知道你有没有机会检查我的答案吗？如果您有任何其他问题，我很乐意为您提供帮助。
0赞 Hooman Bahreini 9/1/2021
谢谢，我决定完全删除引导程序，如上所述

答：

-1赞 Bettylex 8/21/2021 #1

您可以使用 transform 属性将其居中，前提是您为元素提供除静态以外的任何位置（在本例中我使用了 relative）。

table,
.modal-footer a {
  margin-left: auto;
  margin-right: auto;
}

.modal-footer {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

td {
  width: 60px;
  text-align: center;
  color: #1a73e8;
}

a.browser-icon {
  width: 36px;
  height: auto;
  img {
    width: 32px;
    height: auto;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script>
    $(window).on('load', function() {
      $('#outdatedBrowserModal').modal('show');
    });
  </script>
  <style>

  </style>
</head>

<body>
  <div class="container">
    <div class='modal fade' id='outdatedBrowserModal' tabindex='-1' role='dialog' aria-hidden='true' data-backdrop="static" data-keyboard="false">
      <div class='modal-dialog modal-dialog-centered' role='document'>
        <div class='modal-content'>
          <div class='modal-header'>
            <h5 class='modal-title'>YOUR BROWSER IS OUT-OF-DATE!</h5>
          </div>
          <div class='modal-body'>
            <p>
              To continue using the site please use an up-to-date browser such as:
            </p>
            <table>
              <tr>
                <td>
                  <a class='browser-icon'>
                    <img src='https://www.shopless.co.nz/images/icons/chrome.svg' alt='Chrome' title='Chrome'></a>
                </td>
                <td>
                  <a class='browser-icon'>
                    <img src='https://www.shopless.co.nz/images/icons/safari.svg' alt='Safari' title='Safari'></a>
                </td>
                <td>
                  <a class='browser-icon'>
                    <img src='https://www.shopless.co.nz/images/icons/firefox.svg' alt='Firefox' title='Firefox'></a>
                </td>
                <td>
                  <a class='browser-icon'>
                    <img src='https://www.shopless.co.nz/images/icons/edge.svg' alt='Edge' title='Edge'></a>
                </td>
                <td>
                  <a class='browser-icon'>
                    <img src='https://www.shopless.co.nz/images/icons/opera.svg' alt='Opera' title='Opera'></a>
                </td>
              </tr>
              <tr>
                <td>Chrome</td>
                <td>Safari</td>
                <td>Firefox</td>
                <td>Edge</td>
                <td>Opera</td>
              </tr>
            </table>
          </div>
          <div class="modal-footer">
            <a href="https://browser-update.org/update-browser.html" class="btn btn-primary">UPDATE MY BROWSER NOW</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

-1赞 Lalan Kumar 8/21/2021 #2

要使它居中，您可以通过 center 标签将其绑定，如下所示：

<center>
<div class="modal-footer">
            <a href="https://browser-update.org/update-browser.html" class="btn btn-primary">UPDATE MY BROWSER NOW</a>
          </div>
</center>

这应该适用于每个浏览器

0赞 Taro_Naza 8/21/2021 #3

给它一个父 div 并将按钮设置为 并使用display: block;margin: 0 auto;

0赞 Xudong Peng 8/24/2021 #4

我认为这只需要通过translateX属性调整元素在中的位置，如下所示：<a>modal-footer

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
    table {
        margin-left: auto;
        margin-right: auto;
    }

    td {
        width: 60px;
        text-align: center;
        color: #1a73e8;
    }

    a.browser-icon {
        width: 36px;
        height: auto;
    }

    img {
        width: 32px;
        height: auto;
    }

    .modal-footer a {
        transform: translateX(-50%);
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
    $(window).on('load', function () {
        $('#outdatedBrowserModal').modal('show');
    });
</script>
</head>

这是IE的结果：enter image description here

上一个：隐藏浏览器上的垂直滚动条，但使其仍能正常工作

下一个：VBA 使用 className 单击弹出的 sweet-container 按钮