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

Posted

技术标签:

【中文标题】如何在不支持 flex 的浏览器中居中按钮？【英文标题】：How to center button in browsers not supporting flex? 【发布时间】：2021-10-22 13:45:12 【问题描述】：

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

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中无法正常显示，如下图：

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

【问题讨论】：

如果你想支持 IE，我会开始删除 Boostrap。从头开始写一些基本的 CSS 请问您是否有机会检查我的答案？如果您有任何其他问题，我很乐意为您提供帮助。 谢谢，我决定按照上面的建议完全删除引导程序 【参考方案1】：

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

【讨论】：

【参考方案2】：

我认为这只需要通过translateX attribute调整modal-footer中&lt;a&gt;元素的位置，像这样：

<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 中的结果：

【讨论】：

【参考方案3】：

如果你给元素任何位置但静态的（我在这种情况下使用相对），你可以使用 transform 属性使其居中。

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>

【讨论】：

【参考方案4】：

要使其居中，您可以像这样通过中心标签将其绑定：

<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>

这适用于所有浏览器

【讨论】：

以上是关于如何在不支持 flex 的浏览器中居中按钮？的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 Antd 在网页/浏览器中居中登录表单？

如何在弹性容器中居中卡片

如何在不使用间隙的情况下使用 flex 创建间隙空间 [重复]

如何在 flexbox 中居中文本？

Flex 项目不在 IE 中居中

如何在kivy中居中按钮？