2 files changed, 19 insertions, 10 deletions
diff --git a/less/mixins.less b/less/mixins.less
index e05667fff..d74ce73df 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -531,7 +531,7 @@
 // COMPONENT MIXINS
 // --------------------------------------------------
 
-// NAV DIVIDER
+// Horizontal dividers
 // -------------------------
 // Dividers (basically an hr) within dropdowns and nav lists
 .nav-divider() {
@@ -549,7 +549,7 @@
   *margin: -5px 0 5px;
 }
 
-// BUTTON BACKGROUNDS
+// Button backgrounds
 // ------------------
 .buttonBackground(@startColor, @endColor) {
   // gradientBar will set the background to a pleasing blend of these, to support IE<=9
@@ -568,7 +568,15 @@
   }
 }
 
-// POPOVER ARROWS
+// Navbar vertical align
+// -------------------------
+// Vertically center elements in the navbar.
+// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
+.navbarVerticalAlign(@elementHeight) {
+  margin-top: (@navbarHeight - @elementHeight) / 2;
+}
+
+// Popover arrows
 // -------------------------
 // For tipsies and popovers
 #popoverArrow {
diff --git a/less/navbar.less b/less/navbar.less
index 62cde1bd1..87f260699 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -74,7 +74,7 @@
   // Buttons in navbar
   .btn,
   .btn-group {
-    margin-top: 5px; // make buttons vertically centered in navbar
+    .navbarVerticalAlign(30px); // Vertically center in navbar
   }
   .btn-group .btn {
     margin-top: 0; // then undo the margin here so we don't accidentally double it
@@ -86,15 +86,16 @@
   margin-bottom: 0; // remove default bottom margin
   .clearfix();
   input,
+  select,
+  .radio,
+  .checkbox {
+    .navbarVerticalAlign(30px); // Vertically center in navbar
+  }
+  input,
   select {
     display: inline-block;
-    margin-top: 5px;
     margin-bottom: 0;
   }
-  .radio,
-  .checkbox {
-    margin-top: 5px;
-  }
   input[type="image"],
   input[type="checkbox"],
   input[type="radio"] {
@@ -114,7 +115,7 @@
 .navbar-search {
   position: relative;
   float: left;
-  margin-top: 6px;
+  .navbarVerticalAlign(28px); // Vertically center in navbar
   margin-bottom: 0;
   .search-query {
     padding: 4px 9px;