diff --git a/src/librustdoc/html/static/css/noscript.css b/src/librustdoc/html/static/css/noscript.css
index 0a19a99abf054..63b35f5d0df0d 100644
--- a/src/librustdoc/html/static/css/noscript.css
+++ b/src/librustdoc/html/static/css/noscript.css
@@ -14,7 +14,7 @@ rules.
 	display: none;
 }
 
-.sub {
+nav.sub {
 	/* The search bar and related controls don't work without JS */
 	display: none;
 }
diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index 746a510c488f9..afe1ca5d7e520 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -365,15 +365,8 @@ img {
 	overflow: visible;
 }
 
-.sub-container {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: nowrap;
-}
-
 .sub-logo-container {
-	display: block;
-	margin-right: 20px;
+	line-height: 0;
 }
 
 .sub-logo-container > img {
@@ -696,14 +689,21 @@ pre, .rustdoc.source .example-wrap {
 }
 
 nav.sub {
-	position: relative;
 	flex-grow: 1;
-	margin-bottom: 25px;
+	flex-flow: row nowrap;
+	margin: 4px 0 25px 0;
+	display: flex;
+	align-items: center;
+}
+nav.sub form {
+	flex-grow: 1;
 }
 .source nav.sub {
+	margin: 0 0 15px 0;
+}
+.source nav.sub form {
 	margin-left: 32px;
 }
-nav.sub form { display: inline; }
 
 a {
 	text-decoration: none;
@@ -796,7 +796,6 @@ table,
 	position: relative;
 	display: flex;
 	height: 34px;
-	margin-top: 4px;
 }
 .search-results-title {
 	margin-top: 0;
@@ -1822,10 +1821,6 @@ in storage.js
 		margin-left: 0px;
 	}
 
-	.source .content {
-		margin-top: 10px;
-	}
-
 	.anchor {
 		display: none !important;
 	}
@@ -1934,6 +1929,11 @@ in storage.js
 	.impl-items > .item-info {
 		margin-left: 34px;
 	}
+
+	.source nav.sub {
+		margin: 0;
+		padding: 8px;
+	}
 }
 
 @media print {
@@ -1962,12 +1962,12 @@ in storage.js
 		overflow-wrap: anywhere;
 	}
 
-	.sub-container {
+	nav.sub {
 		flex-direction: column;
 	}
 
-	.sub-logo-container {
-		align-self: center;
+	nav.sub form {
+		align-self: stretch;
 	}
 
 	.sub-logo-container > img {
diff --git a/src/librustdoc/html/templates/page.html b/src/librustdoc/html/templates/page.html
index 20a314a1c00e3..2a111f94e5078 100644
--- a/src/librustdoc/html/templates/page.html
+++ b/src/librustdoc/html/templates/page.html
@@ -102,7 +102,7 @@ <h2></h2> {#- -#}
     </nav> {#- -#}
     <main> {#- -#}
         <div class="width-limiter"> {#- -#}
-            <div class="sub-container"> {#- -#}
+            <nav class="sub"> {#- -#}
                 {%- if page.css_class == "source" -%}
                 <a class="sub-logo-container" href="{{page.root_path|safe}}{{krate_with_trailing_slash|safe}}index.html"> {#- -#}
                     {%- if !layout.logo.is_empty()  %}
@@ -112,30 +112,28 @@ <h2></h2> {#- -#}
                     {%- endif -%}
                 </a> {#- -#}
                 {%- endif -%}
-                <nav class="sub"> {#- -#}
-                    <form class="search-form"> {#- -#}
-                        <div class="search-container"> {#- -#}
-                            <span></span> {#- This empty span is a hacky fix for Safari - See #93184 -#}
-                            <input {# -#}
-                                class="search-input" {# -#}
-                                name="search" {# -#}
-                                autocomplete="off" {# -#}
-                                spellcheck="false" {# -#}
-                                placeholder="Click or press ‘S’ to search, ‘?’ for more options…" {# -#}
-                                type="search"> {#- -#}
-                            <div id="help-button" title="help" tabindex="-1"> {#- -#}
-                                <a href="{{page.root_path|safe}}help.html">?</a> {#- -#}
-                            </div> {#- -#}
-                            <div id="settings-menu" tabindex="-1"> {#- -#}
-                                <a href="{{page.root_path|safe}}settings.html" title="settings"> {#- -#}
-                                    <img width="22" height="22" alt="Change settings" {# -#}
-                                     src="{{static_root_path|safe}}wheel{{page.resource_suffix}}.svg"> {#- -#}
-                                </a> {#- -#}
-                            </div> {#- -#}
+                <form class="search-form"> {#- -#}
+                    <div class="search-container"> {#- -#}
+                        <span></span> {#- This empty span is a hacky fix for Safari - See #93184 -#}
+                        <input {# -#}
+                            class="search-input" {# -#}
+                            name="search" {# -#}
+                            autocomplete="off" {# -#}
+                            spellcheck="false" {# -#}
+                            placeholder="Click or press ‘S’ to search, ‘?’ for more options…" {# -#}
+                            type="search"> {#- -#}
+                        <div id="help-button" title="help" tabindex="-1"> {#- -#}
+                            <a href="{{page.root_path|safe}}help.html">?</a> {#- -#}
                         </div> {#- -#}
-                    </form> {#- -#}
-                </nav> {#- -#}
-            </div> {#- -#}
+                        <div id="settings-menu" tabindex="-1"> {#- -#}
+                            <a href="{{page.root_path|safe}}settings.html" title="settings"> {#- -#}
+                                <img width="22" height="22" alt="Change settings" {# -#}
+                                 src="{{static_root_path|safe}}wheel{{page.resource_suffix}}.svg"> {#- -#}
+                            </a> {#- -#}
+                        </div> {#- -#}
+                    </div> {#- -#}
+                </form> {#- -#}
+            </nav> {#- -#}
             <section id="main-content" class="content">{{- content|safe -}}</section> {#- -#}
         </div> {#- -#}
     </main> {#- -#}
diff --git a/src/test/rustdoc-gui/help-page.goml b/src/test/rustdoc-gui/help-page.goml
index 51f089cce747f..521e14748af12 100644
--- a/src/test/rustdoc-gui/help-page.goml
+++ b/src/test/rustdoc-gui/help-page.goml
@@ -5,12 +5,12 @@ wait-for: "#help"
 assert-css: ("#help", {"display": "block"})
 click: "#help-button > a"
 assert-css: ("#help", {"display": "block"})
-compare-elements-property: (".sub-container", "#help", ["offsetWidth"])
-compare-elements-position: (".sub-container", "#help", ("x"))
+compare-elements-property: (".sub", "#help", ["offsetWidth"])
+compare-elements-position: (".sub", "#help", ("x"))
 size: (500, 1000) // Try mobile next.
 assert-css: ("#help", {"display": "block"})
-compare-elements-property: (".sub-container", "#help", ["offsetWidth"])
-compare-elements-position: (".sub-container", "#help", ("x"))
+compare-elements-property: (".sub", "#help", ["offsetWidth"])
+compare-elements-position: (".sub", "#help", ("x"))
 
 // This test ensures that opening the help popover without switching pages works.
 goto: "file://" + |DOC_PATH| + "/test_docs/index.html"
@@ -20,5 +20,5 @@ click: "#help-button > a"
 assert-css: ("#help", {"display": "block"})
 click: "#help-button > a"
 assert-css: ("#help", {"display": "none"})
-compare-elements-property-false: (".sub-container", "#help", ["offsetWidth"])
-compare-elements-position-false: (".sub-container", "#help", ("x"))
+compare-elements-property-false: (".sub", "#help", ["offsetWidth"])
+compare-elements-position-false: (".sub", "#help", ("x"))
diff --git a/src/test/rustdoc-gui/settings.goml b/src/test/rustdoc-gui/settings.goml
index ed4e9c2516b0b..f258f4d2a838e 100644
--- a/src/test/rustdoc-gui/settings.goml
+++ b/src/test/rustdoc-gui/settings.goml
@@ -147,7 +147,7 @@ assert-css: (
 )
 
 assert-attribute-false: ("#settings", {"class": "popover"}, CONTAINS)
-compare-elements-position: (".sub-container", "#settings", ("x"))
+compare-elements-position: (".sub form", "#settings", ("x"))
 
 // We now check the display with JS disabled.
 assert-false: "noscript section"
diff --git a/src/test/rustdoc-gui/source-code-page.goml b/src/test/rustdoc-gui/source-code-page.goml
index 76260d621eae1..29d65fc7ebc7a 100644
--- a/src/test/rustdoc-gui/source-code-page.goml
+++ b/src/test/rustdoc-gui/source-code-page.goml
@@ -23,7 +23,7 @@ assert-css: (".src-line-numbers", {"text-align": "right"})
 show-text: true
 goto: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html"
 // We use this assert-position to know where we will click.
-assert-position: ("//*[@id='1']", {"x": 104, "y": 103})
+assert-position: ("//*[@id='1']", {"x": 104, "y": 112})
 // We click on the left of the "1" span but still in the "src-line-number" `<pre>`.
 click: (103, 103)
 assert-document-property: ({"URL": "/lib.rs.html"}, ENDS_WITH)
@@ -47,3 +47,25 @@ assert-property: ("#source-sidebar details:first-of-type", {"open": "false"})
 
 // Check the spacing.
 assert-css: ("#source-sidebar > details.dir-entry", {"padding-left": "4px"})
+
+// Check the search form
+assert-css: ("nav.sub", {"flex-direction": "row"})
+// The goal of this test is to ensure the search input is perfectly centered
+// between the top of the page and the top of the gray code block.
+// To check this, we maintain the invariant:
+//
+// offsetTop[nav.sub form] = offsetTop[#main-content] - offsetHeight[nav.sub form] - offsetTop[nav.sub form]
+assert-property: ("nav.sub form", {"offsetTop": 28, "offsetHeight": 34})
+assert-property: ("#main-content", {"offsetTop": 90})
+// 28 = 90 - 34 - 28
+
+// Now do the same check on moderately-sized mobile.
+size: (700, 700)
+assert-css: ("nav.sub", {"flex-direction": "row"})
+assert-property: ("nav.sub form", {"offsetTop": 21, "offsetHeight": 34})
+assert-property: ("#main-content", {"offsetTop": 76})
+// 21 = 76 - 34 - 21
+
+// Tiny mobile gets a different display where the logo is stacked on top.
+size: (450, 700)
+assert-css: ("nav.sub", {"flex-direction": "column"})