Center aligned the Search Bar (#610)

Rakesh9100 · Feb 23, 2024 · ad17a97 · ad17a97
1 parent 26f1a1e
commit ad17a97
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -82,7 +82,9 @@ <h3>All calculators, spot in a single place!!</h3>
         <!-- Search Bar -->
         <div id="searchBar">
             <h1>Search Calculator</h1><br>
-            <input type="text" id="calculatorSearch" placeholder="Enter Calculator Name" oninput="filterCalculators()">
+            <div class="search-input-container">
+                <input type="text" id="calculatorSearch" placeholder="Enter Calculator Name" oninput="filterCalculators()">
+            </div>
         </div>
 
         <div class="box">

diff --git a/style.css b/style.css
@@ -1670,12 +1670,18 @@ section {
     margin-top: 16px;
 }
 
+.search-input-container {
+    margin-left: 8rem;
+    align-items: center;
+    display: inline;
+}
+
 #searchBar button {
-    font-size: 2.5rem;
+    font-size: 2rem;
     background: transparent;
     border: 0;
     color: white;
-    margin-left: 1rem;
+    margin-left: 5px;
     background-color: #ff1b82;
     padding: .7rem;
     width: 8rem;
@@ -1709,6 +1715,8 @@ section {
     #searchBar input {
         width: 100%;
         font-size: 1.5rem;
+        align-items: center;
+        display: flex;
     }
 
     #searchBar button {