如何在不支持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">/span>
  < 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">/span>
  <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>/span>
  <script src="https://maxcdn. bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>/span>
  <script>/span>
    $(window).on('load'，function() {
      $（'#outdatedBrowserModal'）.modal（'show'）。
    });
  </script>>
  <style> 

  </style> 
</head> 

<body> 
  <div class="container"> 
    < div class='modal fade'/span> id=' outdatedBrowserModal' tabindex='-1' role='dialog' aria-hidden='true'  data-back   attr">data-backdrop="static" data-keyboard="false"> 
      < div class='modal-dialog modal-dialog-centered' role='document'> 
        <div class='modal-content'/span>>
          <div class='modal-header'> 
            <h5 class='modal-title'>YOUR BROWSER IS OUT-FATE! </h5>你的瀏覽器已經過期了!
          </div>/span>
          <div class='modal-body'> 
            <p>/span>
              要繼續使用本網站，請使用最新的瀏覽器，如。
            </p>要繼續使用該網站，請使用最新的瀏覽器，例如：</p>
            <table>/span>
              <tr> 
                <td>/span>
                  <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=> </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>/span>
              <tr>/span>
                <td>Chrome</td>
                <td>/span>Safari</td>/span>
                <td>/span>Firefox</td>/span>
                <td>/span>Edge</td>/span>
                <td>/span>Opera</td>/span>
              </tr>/span>
            </table>/span>
          </div> 
          <div class="modal-footer"> 
            <a href="https://browser-update.org/update-browser. html" class="btn btn-primary">Update MY BROWSER NOW</a> 
          </div>/span>
        </div>/span>
      </div>/span>
    </div>/span>
  </div>/span>
</body> 

</html>/span>

是否有其他方法可以將頁腳按鈕居中？

uj5u.com熱心網友回復：

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

居中。

uj5u.com熱心網友回復：

我認為這只需要在modal-footer中通過

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">/span>
  < 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">/span>
  <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>/span>
  <script src="https://maxcdn. bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>/span>
  <script>/span>
    $(window).on('load'，function() {
      $（'#outdatedBrowserModal'）.modal（'show'）。
    });
  </script>>
  <style> 

  </style> 
</head> 

<body> 
  <div class="container"> 
    < div class='modal fade'/span> id=' outdatedBrowserModal' tabindex='-1' role='dialog' aria-hidden='true'  data-back   attr">data-backdrop="static" data-keyboard="false"> 
      < div class='modal-dialog modal-dialog-centered' role='document'> 
        <div class='modal-content'/span>>
          <div class='modal-header'> 
            <h5 class='modal-title'>YOUR BROWSER IS OUT-FATE! </h5>你的瀏覽器已經過期了!
          </div>/span>
          <div class='modal-body'> 
            <p>/span>
              要繼續使用本網站，請使用最新的瀏覽器，如。
            </p>要繼續使用該網站，請使用最新的瀏覽器，例如：</p>
            <table>/span>
              <tr> 
                <td>/span>
                  <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=> </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>/span>
              <tr>/span>
                <td>Chrome</td>
                <td>/span>Safari</td>/span>
                <td>/span>Firefox</td>/span>
                <td>/span>Edge</td>/span>
                <td>/span>Opera</td>/span>
              </tr>/span>
            </table>/span>
          </div> 
          <div class="modal-footer"> 
            <a href="https://browser-update.org/update-browser. html" class="btn btn-primary">Update MY BROWSER NOW</a> 
          </div>/span>
        </div>/span>
      </div>/span>
    </div>/span>
  </div>/span>
</body> 

</html>/span>

uj5u.com熱心網友回復：

為了使其處于中心位置，你可以用中心標簽來約束它，就像這樣：

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

這將在每個瀏覽器中作業

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

標籤：

上一篇：如何使Excel在IE（非默認瀏覽器）中過濾表格時打開超鏈接

下一篇：用Powershell發送ENTER鍵實作IE自動化