Fixes #14799: Add vertical alignment of image in media component

Signed-off-by: Jenn Dodd <jedodd@pivotal.io>

less/media.less

@@ -1,51 +1,44 @@
-// Media objects
-// Source: http://stubbornella.org/content/?p=497
-// --------------------------------------------------
-
-
-// Common styles
-// -------------------------
-
-// Clear the floats
-.media,
-.media-body {
-  overflow: hidden;
-  zoom: 1;
-}
-
-// Proper spacing between instances of .media
-.media,
-.media .media {
+.media {
+  // Proper spacing between instances of .media
   margin-top: 15px;
-}
-.media:first-child {
-  margin-top: 0;
-}
 
-// For images and videos, set to block
-.media-object {
-  display: block;
+  // Proper spacing of .media-right
+  .media-right,
+  .pull-right {
+    padding-left: 10px;
+  }
+
+  // Proper spacing of .media-left
+  .media-left,
+  .pull-left {
+    padding-right: 10px;
+  }
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  .media-left,
+  .media-right,
+  .media-body {
+    display: table-cell;
+    vertical-align: top;
+  }
+
+  .media-middle {
+    vertical-align: middle;
+  }
+
+  .media-bottom {
+    vertical-align: bottom;
+  }
 }
 
 // Reset margins on headings for tighter default spacing
 .media-heading {
-  margin: 0 0 5px;
+  margin: 0 0 5px 0;
 }
 
-
-// Media image alignment
-// -------------------------
-
-.media {
-  > .pull-left {
-    margin-right: 10px;
-  }
-  > .pull-right {
-    margin-left: 10px;
-  }
-}
-
-
 // Media list variation
 // -------------------------