如何在不支持flex的瀏覽器中居中按鈕？-有解無憂

我創建了以下頁面，以通知用戶他們的瀏覽器已過時。

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 中無法正常顯示，如下所示：

如何在不支持 flex 的瀏覽器中居中按鈕？

有沒有其他方法可以使頁腳按鈕居中？

uj5u.com熱心網友回復：

給它一個父 div 并將按鈕設定為display: block;并使用它居中margin: 0 auto;

uj5u.com熱心網友回復：

我認為這只需要通過如何在不支持 flex 的瀏覽器中居中按鈕？

uj5u.com熱心網友回復：

如果您給元素任何位置但靜態（在這種情況下我使用相對），您可以使用 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>

uj5u.com熱心網友回復：

要使其居中，您可以通過中心標簽將其系結，如下所示：

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

這適用于每個瀏覽器

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/419313.html

標籤：

上一篇：SCRIPT1002：語法錯誤-IE11，在我的Nextjs上

下一篇：無法將文本從Excel復制到網站，顯示運行時錯誤