Guide on how to position a button in the center of browsers that do not support flex

I have put together this page to notify users that their browser is outdated.

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>

The issue I'm encountering is that the page does not display properly in Internet Explorer, shown below:

https://i.sstatic.net/lS7yp.png

Is there an alternative method to center the footer button?

htmlcssinternet-explorerbootstrap-4

Answer №1

Make sure to wrap the button in a parent div element and apply the CSS property display: block; to it. Then, center the button horizontally by using margin: 0 auto;

Answer №2

In my opinion, a simple adjustment to the position of the <a> element within the modal-footer can be achieved by using the translateX attribute. Here is an example:

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

This adjustment produces the following result in Internet Explorer: https://i.sstatic.net/Wv41k.png

Answer №3

To horizontally center the element, you can utilize the transform property along with a non-static position (such as 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>

Answer №4

If you want to center this content, you can wrap it in a center tag like so:

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

This method should be effective across all browsers.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Locate a specific class inside a div and switch the CSS style to hide one element and reveal another

I have two divs, each containing a span. By default, the display of each span class is set to none. My goal is to toggle the display property of the span within the clicked div. If the span is already visible, I want to hide it; if it's hidden, I want ...

javascriptjqueryhtmlcss

I'm having trouble centering divs with Bootstrap

Currently, I am utilizing MVC5 with the Razor view engine and Bootstrap. I am facing an issue where I am trying to center some images, but I am running into difficulties. Oddly enough, when I include the Bootstrap.css file, the centering does not work as ...

csstwitter-bootstrapcenter

Is there a way to clear a @font-face downloaded font from the browser cache?

Recently, I realized that I made an error in my webapp release by using a limited version of "Droid Sans" with @font-face for Latin characters. The font files are hosted on my server. To rectify this issue, I have now updated the font to the full version s ...

cssfont-face

Mistakes encountered while creating a simple JavaScript slideshow featuring navigation buttons

Currently, I am attempting to create a JavaScript slideshow with both forward and back buttons. The task seems simple enough - I just need 8 images that can be navigated through by clicking the buttons. However, I am facing a frustrating issue with my code ...

javascripthtml

CSS - Adjusting width based on height ratio

I'm in the process of developing a website and could use some guidance. I have a specific section where I am aiming for the height to be 79.6% of the body, with the width of that div being dependent on its height. Thus far, my research has only yielde ...

htmlcss

Issue with different domains causes GET requests to be changed to OPTIONS requests

In my recent request and response interaction, I encountered an issue with the Access Allow Control Origin being set to *. Remote Address:xx.xxx.xxx.xxx:xx Request URL:http://api-test.example.com/api/v1/sample Request Method:OPTIONS Status Code:405 Method ...

jqueryajaxhtmljquery-mobilecors

Design cards in a particular sequence using either bootstrap or CSS

I am currently developing a blog website and I need assistance with arranging the cards in this specific order: https://i.sstatic.net/Ffpcb.png Despite my efforts using Bootstrap, I am unable to achieve the desired layout. Here is the code I have so far: ...

javascripthtmlcssbootstrap-5

Why doesn't AngularJS validation function properly with input elements of type "number"?

Struggling with Angularjs validation here. Ng-pattern seems to work fine only when the input type is text. However, when the input type is number, ng-pattern doesn't seem to work, although required, min, and max attributes still function. <input t ...

javascriptangularjshtml

I am looking to display multiple divs sequentially on a webpage using JavaScript

Looking to display a rotating set of alerts or news on my website. The goal is to show each news item for a certain number of seconds before moving on to the next one in line. However, I'm new to javascript and need help creating a code that will cont ...

javascripthtml

The clarity of an HTML input field is still unclear despite attempting to clear it using the clear()

When I created a form in HTML using PHP, AJAX, JavaScript, and jQuery, I encountered an issue where after entering data and updating it in the database, the input fields were not being cleared. I tried using clear() in JavaScript but it didn't work. C ...

javascriptjqueryhtml

What are your strategies for designing a website specifically for mobile users?

Today, most modern smartphones come with 720p or 1080p resolution screens. This means that even on smaller screens, like a 4-inch display on a Galaxy s3, we can still view all the text and GUI elements (such as email textboxes) on a website when we first o ...

htmlcssmobile

Acquire the information for PHP data updating

I'm currently working on a login system and data update feature that allows users to update their account information. To begin, please enter the login name of the account you wish to modify: UPDATEINPUT.HTML <html> <form method = "get" a ...

phphtmlmysql

Creating a dynamic form that efficiently captures user information and automatically redirects to the appropriate web page

Sorry for the unusual question, but it was the best way I could think of asking. I have come across websites with fill-in-the-blank lines where you can input your desired information and then get redirected to another page. For example: "What are you sea ...

javascripthtmlcsswordpress

Align the radio button in the center of the input field

I have created custom radio buttons, and the last option includes a radio button with an input field. However, in the Codepen example provided, the alignment of the radio button and input field is not centered vertically. I've attempted various soluti ...

htmlcsstwitter-bootstrapbootstrap-4

Getting the location of a mouse click and adding tags (marks) on an image: a simple guide

Is there a way to incorporate images with tagged marks similar to Facebook's image tagging feature? How can I retrieve the X and Y coordinates of tags on the image itself (not the screen) and display them in a responsive manner? ...

javascriptjqueryhtmlcss

A guide to using the up and down keys to switch focus between div elements in a react component with TypeScript and CSS

I am currently working with a scenario where data is being displayed within different div elements, and I wish to enable the selection/focus of a specific div when users use the up/down arrow keys. While trying to achieve this functionality by using refs ...

htmlcssreactjstypescriptmaterial-ui

Is there a way to show output on render rather than using console.log in node.js?

I have successfully sorted the objects as shown in the link below. My next challenge is to integrate the sorted object into my render function rather than just using console.log(). I'm uncertain if converting it back into an object is the right appro ...

javascripthtmlcssnode.jsexpress

The desired jQuery datatable theme did not take effect on the JSP page

Experimenting with various JQuery themes and controls. Attempting to use a datatable example and apply the default theme provided here. However, I have been encountering difficulties. Seeking assistance to understand the root cause of this issue. Also, in ...

javascriptjquerycssjspdatatables

Learn how to align a form to the right using HTML, CSS, and Bootstrap

I am completely new to front-end technology. I have been attempting to write some code for my backend app using Html, Css, and Bootstrap. Currently, I am trying to place a search form on the right side of my webpage. Can anyone help me figure out what I am ...

htmlcssbootstrap-4

When the parent div overflows, the child div remains hidden within the boundaries of the parent div

<section class="margin-top-30"> <div class="row" style="position: relative;"> <div class="col-sm-4"> <div class="lightbgblock" style="overflow-x:visible;overflow-y:scroll;"> ...

javascriptjqueryhtmlcss