Fixed the centering of the "Log in" button on admin login page.

Previously, the button's container had a padding of 9.4em which was
approximately center but not precisely. Now, the container uses
'align:text-center' to let the browser center the button.

3 files changed, 13 insertions, 26 deletions

diff --git a/django/contrib/admin/static/admin/css/login.css b/django/contrib/admin/static/admin/css/login.css
index a270800a66..e3a288b9e9 100644
--- a/django/contrib/admin/static/admin/css/login.css
+++ b/django/contrib/admin/static/admin/css/login.css
@@ -36,31 +36,23 @@
 
 .login .form-row {
     padding: 4px 0;
-    float: left;
-    width: 100%;
-    border-bottom: none;
 }
 
 .login .form-row label {
     display: block;
     line-height: 2em;
-    clear: both;
 }
 
 .login .form-row #id_username, .login .form-row #id_password {
-    clear: both;
     padding: 8px;
     width: 100%;
     box-sizing: border-box;
 }
 
 .login .submit-row {
-    clear: both;
-    padding: 1em 0 0 9.4em;
+    padding: 1em 0 0 0;
     margin: 0;
-    border: none;
-    background: none;
-    text-align: left;
+    text-align: center;
 }
 
 .login .password-reset-link {
diff --git a/django/contrib/admin/static/admin/css/rtl.css b/django/contrib/admin/static/admin/css/rtl.css
index e5246367b5..f39777214f 100644
--- a/django/contrib/admin/static/admin/css/rtl.css
+++ b/django/contrib/admin/static/admin/css/rtl.css
@@ -1,19 +1,3 @@
-/* LOGIN */
-
-.login .form-row {
-    float: right;
-}
-
-.login .form-row label {
-    float: right;
-    text-align: left;
-}
-
-.login .submit-row {
-    clear: both;
-    padding: 1em 9.4em 0 0;
-}
-
 /* GLOBAL */
 
 th {
diff --git a/tests/admin_views/tests.py b/tests/admin_views/tests.py
index a3a60ba181..caa1d80164 100644
--- a/tests/admin_views/tests.py
+++ b/tests/admin_views/tests.py
@@ -4460,6 +4460,17 @@ class SeleniumTests(AdminSeleniumTestCase):
         self.superuser = User.objects.create_superuser(username='super', password='secret', email='super@example.com')
         self.p1 = PrePopulatedPost.objects.create(title='A Long Title', published=True, slug='a-long-title')
 
+    def test_login_button_centered(self):
+        self.selenium.get(self.live_server_url + reverse('admin:login'))
+        button = self.selenium.find_element_by_css_selector('.submit-row input')
+        offset_left = button.get_property('offsetLeft')
+        offset_right = (
+            button.get_property('offsetParent').get_property('offsetWidth') -
+            (offset_left + button.get_property('offsetWidth'))
+        )
+        # Use assertAlmostEqual to avoid pixel rounding errors.
+        self.assertAlmostEqual(offset_left, offset_right, delta=3)
+
     def test_prepopulated_fields(self):
         """
         The JavaScript-automated prepopulated fields work with the main form